python flask ajax 예제 사용방법

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

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

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

.item-img.active { background-color: cornflowerblue; } $(".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'); }

from http://minimilab.tistory.com/60 by ccl(A) rewrite - 2021-02-24 23:00:51