onclick 사용(데이터 삭제, 폐이지 이동)

2023.01.09

문제

버튼을 눌러서 데이터를 삭제하거나 변경해야하는대 반응이 없다....
버튼을 눌러서 페이지 이동해야하는대 안가진다..

시도

버튼과 연결된 메서드의 이름이 잘못되었는지 확인,
버튼을 눌렀을때 전달되는 변수가 다른지..
Python에서 작성한 db수정 명령이 잘못된것인지 확인.
..이상없음!

해결

정말 자세히 들여다보니 onClick으로 작성되어 있었다.
onclick으로 작성해야 정상적인 메서드를 불러올 수 있다.
그 후 삭제 버튼 만들기

function delete_list(num){
    $.ajax({
        type: "POST",
        url: "/watchlist/delete",
        data: {num_give: num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

우선 버튼을 통해 통신할 메서드를 만들어 줘야 한다.

@app.route("/watchlist/delete", methods=["POST"])
def list_delete():
    num_receive = request.form['num_give']
    db.movieList.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '삭제 완료!'})

삭제를 받을 주소를 만들어주고 db에 명령을 post 해서 데이터를 수정/삭제 한다.
python에서 받아올 주소를 만들어줘야 넘겨줄 수 있었다.

폐이지 이동역시 마찬가지다. 아래처럼 onclick=document.location.href=주소값 을 입력해주면 버튼을 통한 주소 불러들이기가 가능하다.

onclick="document.location.href='/list.html'"

파이썬에서 미리 만들어준 주소를 호출시 list.html을 호출하게 된다.

@app.route('/list')
def checklist():
    return render_template('list.html')

하고 주소를 만들어 줘야 그 주소를 통해 list,html을 불러올 수 있다.

후기

항상 코드를 입력할때 대/소문자 구분을 보다 신경써서 확인해야함을 느꼈다..
이런 케이스의 에러는 생각보다 찾기가 어렵다.

새로운 활용법을 찾을 수 있어 좋았다.