TIL-23.03.23

CRUD 중 Delete 기능구현

python

@app.route("/movie/delete", methods=["POST"])
def movie_del():
    title_receive = request.form['title_give']      

    db.movies.delete_one({'title':title_receive})
  
    return jsonify({'msg':'삭제완료!'})

 

JS

-- HTML --
<button id="${title}" onclick="deletebtn(this)">삭제</button>

-- JS --
function deletebtn(e) {
        let col = $(e).attr('id');
        console.log(col);

        let formData = new FormData();
        formData.append('title_give', col);

        fetch('/movie/delete', { method: 'POST', body: formData })
          .then((res) => res.json())
          .then((data) => {
            alert(data['msg']);
            window.location.reload();
          });
      }

- 카드리스트에 있는 삭제 버튼을 클릭하면 deletebtn() 함수가 실행되고

함수 내부 fetch요청으로 백엔드서버(파이썬)쪽으로 formdata가 전송된다

백앤드 입장에서 받은 데이터를 가지고 DB쪽 데이터를 삭제

여러카드 중 클릭이벤트가 발생한 요소를 감지하기 위해서 this를 사용했고, 함수 선언에서 변수로 이벤트(e)를 받았다

 

원래는 프론트만 공부했었는데,

백엔드 쪽에서 어떻게 데이터를 받는지를 조금이라도 알게되니 앞으로 백엔드 분들께 데이터를 잘 보내드려야되겠다는 

생각이 들었다...

 

 

[# jQuery #] id, name, class로 접근방법

jQuery로 id 접근시 $(“#id”),

ex) $(“#header_area”)

 

class로 접근시 $(“.class”),

ex) $(“.section_nav”)

 

name으로 접근시 $(tag_name[name=name]),

ex) $(“input[name=search_value]“)