[항해99 14기 온보딩] 스파르타 피디아 삭제 버튼 구현

index.html

listing() 의 temp_html에 삭제 버튼 먼저 추가함

<button onclick="delete_data('${title}')" type="button" class="btn btn-danger">삭제</button>

구글링 했더니 ajax를 사용해 delete구현한 게 있었음

function delete_data(title) {
	$.ajax({
		url: '/movie/delete',
		type: 'POST',
		data: {button_delete:title},
		success: function (response) {
		alert(response['msg'])
		window.location.reload()
		}
	})
}

ajax를 fetch로 바꿔보려고 시도함

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

keyError남. method랑 body 사이에 headers 추가

headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},

최종

function delete_data(title) {
	fetch('/movie/delete', { 
	method: "POST", 
	headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
	body: JSON.stringify({button_delete:title}) })
	.then((res) => res.json()).then((data) => {
		alert(data['msg'])
		window.location.reload()
	})
}

 

app.py

@app.route("/movie/delete", methods=["POST"])
def movie_delete():
    movies_receive = request.form['button_delete']
    db.movies.delete_one({'title':movies_receive})
    return jsonify({'msg':'삭제완료!'})

html 코드가 맞는데 에러가 계속 나서 request를 찍어봄.

@app.route("/movie/delete", methods=["POST"])
def movie_delete():
    print(request.json)
    print(request.get_json)
    print(request.data)
    print(request.get_data)
    print(request.form.to_dict(flat=True))
    movies_receive = request.form['button_delete']
    db.movies.delete_one({'title':movies_receive})
    return jsonify({'msg':'삭제완료!'})

여기서 첫번째 'print(request.json'만 값을 제대로 가져옴.

request.json으로 바꿔주니 에러 없이 실행 완료!

 

최종

@app.route("/movie/delete", methods=["POST"])
def movie_delete():
    movies_receive = request.json['button_delete']
    db.movies.delete_one({'title':movies_receive})
    return jsonify({'msg':'삭제완료!'})