728x90
반응형
Today I Learned
어떤 문제가 있었는지
웹사이트에 게시물을 생성하고 수정/삭제 기능을 추가중에 비밀번호 <input> 태그의 값을 가져오지 못 함
내가 시도해 본 것들
JS는 나에게 생소한 언어라 어떤식으로 작동하는 지 몰랐다.
일단 내 코드는 다음과 같다
// 게임 포스트 비번확인
function check_pw(post_id) {
let check_password = $("#check_password").val();
let formData = new FormData();
formData.append("check_password",check_password);
formData.append("post_id",post_id);
fetch("/detail/check_pw", { method: "POST", body: formData })
.then((response) => response.json())
.then((data) => {
if (data["msg"] === "success") {
window.location.href = "/detail/update"
} else {
alert(data["msg"]);
}
});
}<div>
<input class="input_pw_cj" type="password" placeholder="비밀번호를 입력하세요."
style="width:200px; height:38px; margin-right: 3px;" id="check_password">
<button onclick="del_comment('{{ co.comment_id }}')" type="button"
class="btn btn-secondary" style="margin-bottom: 5px;
background-color: #FA8072;">삭제
</button>
</div>
처음엔 입력값으로 <input>태그에서 post_id를 받고 바로 JS에서 처리하는 함수로 만들어 보았다.
첫번째 포스트는 삭제가 되지만 2번째 포스트부터 아무런 반응이 없고 삭제가 되지 않았다.
아마 첫번째 <input>에만 적용되는 듯.
그래서 JS에 모든 <input> 태그를 받는 코드를 추가해봤다.
# let check_password = $("#check_password").val();
# 위 코드를 아래와 같이 바꿨다
let check_password = document.querySelectorAll("#check_password");
이렇게 하면 클래스명이 check_password인 모든 요소를 가져오지만 역시 원하는 것처럼 되지 않았다.
어떻게 해결 했는지
일단 내 수준에서 가장 간단한 해결법을 생각해봤다. JS왕초보인 나는 저번 프로젝트때도 비슷한 문제가 있어서
주소에 각 게시글의 post_id를 다음과 같이 처리했었다.
<a class="sh-title" href="/${post_id}">${myoneline}</a>
이런식으로 쿼리를 사용해서 주소에 직접 post_id를 담아 썻던 것을 기억했다
이와 비슷한 해결방법을 검색해보니 역시 있었다
<input class="input_pw_cj" type="password" placeholder="비밀번호를 입력하세요."
style="width:200px; height:38px; margin-right: 3px;" id="check_password_{{post.post_id}}">
<button onclick="check_pw('{{ post.post_id }}')" type="button" class="btn btn-secondary"
style="margin-bottom: 5px;">수정
</button>// 게임 포스트 비번확인
function check_pw(post_id) {
let check_password = $("#check_password_" + post_id).val();
let formData = new FormData();
formData.append("check_password",check_password);
formData.append("post_id",post_id);
fetch("/detail/check_pw", { method: "POST", body: formData })
.then((response) => response.json())
.then((data) => {
if (data["msg"] === "success") {
window.location.href = "/detail/update" + "?post_id=" + post_id;
} else {
alert(data["msg"]);
}
});
}
이렇게 id에 post_id를 추가해주고 자바스크립트에서 받아주면 해당 post의 post_id와 비밀번호를 모두 받을 수 있었다
그리고 그렇게 받은 post_id를 쿼리형태로 주소창으로 보내고
@views.route("/detail/check_pw", methods=["POST"])
def check_pw():
check_password = request.form["check_password"]
post_id = request.form["post_id"]
print(post_id)
if check_password == gp.find(post_id)['password']:
return jsonify({"msg": "success"})
else:
return jsonify({"msg": "비밀번호가 일치하지 않습니다."})
views.py에서 받아주고 비밀번호를 체크해서 if문으로 처리해주면 완성!
무엇을 새롭게 알았는지
JS에서 쿼리형태로 주소를 통해 정보를 보내는 법을 알게 되었다.
JS가 생소한 언어이다보니 배우는맛이 있어서 점점 관심이 가는중이다.
728x90
반응형
