python flask ajax 예제 사용방법

item-img 클래스 클릭 시 색상 변경 되고, python flask api 를 통해 DB 에 update, delete 하는 코드

1. python flask api method 생성

@app.route('/post/add_items', methods=['POST'])
def add_items():
    data = json.loads(request.data)
    user_id = data.get('user_id')
    subject = data.get('subject')
    items = data.get('items')

    user_db = db.MongoDB('user')
    user_db.add_item(user_id, subject, items)
    return items

@app.route('/delete/delete_items', methods=['DELETE'])
def delete_items():
    data = json.loads(request.data)
    user_id = data.get('user_id')
    subject = data.get('subject')
    items = data.get('items')

    user_db = db.MongoDB('user')
    user_db.delete_item(user_id, subject, items)
    return items

2. html <script> 태그에 ajax 함수 삽입

* item-img 클래스에 id 를 지정해 주어야 함 

* dataType은 응답 받는 형식(text, json 등)을 지정. api return 값과 형식이 일치해야 함 

<style>
.item-img.active {
  background-color: cornflowerblue;
}
</style>
<script>
        $(".item-img").on('click', itemClick);

        function itemClick(event){
            var targetId = event.currentTarget.id;
            data = {user_id:'a', subject:'housewares', items:targetId }

            if($('#'+targetId).hasClass('active')){
                $.ajax({
                    type:'DELETE',
                    contentType: 'application/json',
                    url:'/delete/delete_items',
                    data:JSON.stringify(data),
                    dataType: 'text',
                    success: function(response){
                        console.log(response)
                    },
                    error : function(xtr, status, error){
                            alert(xtr +":"+status+":"+error);
                    }
                });
            }
            else {
                $.ajax({
                type:'POST',
                contentType: 'application/json',
                url:'/post/add_items',
                data:JSON.stringify(data),
                dataType: 'text',
                success: function(response){
                    console.log(response)
                },
                error : function(xtr, status, error){
                        alert(xtr +":"+status+":"+error);
                }
                });

            }
            $('#'+targetId).toggleClass('active');
        }

</script>