TIL #4

과제에서 영화를 삭제하는 시도를 했다.
movie_delete를 추가하였다.

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

아래에서 card-title 부분에 id를 추가하지 않고 title자체를 빼서 서버에 보내려다 실패하고 몇 시간을 삽질했다.

        function listing() {
            $.ajax({
                type: 'GET',
                url: '/movie',
                data: {},
                success: function (response) {
                    let rows = response['movies']
                    for (let i = 0; i < rows.length; i++) {
                        let comment = rows[i]['comment']
                        let title = rows[i]['title']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']

                        let star_image = '⭐'.repeat(star)

                        let temp_html = `<div class="card h-100">
                                            <img src="${image}"
                                                 class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title" id='title${i}'>${title}</h5>
                                                <p class="card-text">${desc}</p>
                                                <p>${star_image}</p>
                                                <p class="mycomment">${comment}</p>
                                                <button onclick="movie_delete('title${i}')" type="button" class="btn btn-outline-primary">삭제</button>
                                            </div>
                                        </div>`
                        $('#cards-box').append(temp_html)

                    }
                }
            })
        }

        function movie_delete(id) {
            let title = $(`#${id}`).text()
            $.ajax({
                type: "POST",
                url: "/movie/delete",
                data: {title_give: title},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

id를 통해 다 같은 title에 순번을 부여하였다.
기술매니저님이 도와주셨다.
잊지 말자. id.

아무래도 아직 JavaScript의 문법에 대한 이해와, Ajax에 대한 이해가 부족한 것 같다.