흐름 👀
- 비밀번호 인증 -> 완료 시, 버튼 변경 (로그인 계정의 비밀번호와 비교)
- 유효성검사 -> 완료 시, 버튼 변경
- 전송하기 -> 1,2번 완료 시, flask에서 DB에 주민등록번호 추가/변경
이번 글에서는 전송하기 부분을 작성하겠다.
전송하기 ✔
1. HTML 📝
<!-- 버튼 div -->
<div class="btn_area">
<button type="submit" class="btn" id="submit" name="submit">전송하기</button>
</div>👉 버튼 div
버튼 css를 위해 div 안에 button을 넣었다.
input[type="submit"]으로 만들어도 상관없다.
2. JavaScript(AJAX) 📝
// 전송하기를 위한 변수 선언
const sub_btn = document.querySelector("#submit");
// 전송하기 버튼 클릭 시
sub_btn.addEventListener('click', ()=> {
// 두개의 인증 모두 했는지 확인
if(pw_status==false && joo_status==false){
// flask 에 전달할 input 값/종류를 JSON 형태로 선언
const postdata = {
'fir_joo': joo_input1.value, 'sec_joo': joo_input2.value, 'kind': 'submit'
}
$.ajax({
type: 'POST',
data: JSON.stringify(postdata),
dataType : 'JSON',
contentType: "application/json",
success: function(result){
window.location.href = '/ocr/check/'
},
error: function(result){
ajaxAlert(false); // 비동기 통신 실패시 알림창 실행
}
})
}
// 두개의 인증 모두 안했을 때
else {
subAlert(); // 전송 인증실패 알림창 함수 실행
}
});한줄씩 해석해보자.
// 전송하기를 위한 변수 선언 const sub_btn = document.querySelector("#submit"); // 전송하기 버튼 클릭 시 sub_btn.addEventListener('click', ()=> {
HTML에서 id="submit"을 가져와 sub_btn 변수에 저장한다.
전송하기 버튼을 클릭하면 함수가 실행된다.
// 두개의 인증 모두 했는지 확인 if(pw_status==false && joo_status==false){ // flask 에 전달할 input 값/종류를 JSON 형태로 선언 const postdata = { 'fir_joo': joo_input1.value, 'sec_joo': joo_input2.value, 'kind': 'submit' }
pw_status, joo_status에는 비밀번호 인증과 주민등록번호 유효성검사를
정상적으로 완료했다면 false 값을 가지고 있다.
두가지 인증을 모두 완료했다면 서버에 전송할 JSON 변수 postdata를 선언하고,
DB에 저장시킬 주민등록번호의 값을 각각 fir_joo, sec_joo에 담는다.
$.ajax({ type: 'POST', data: JSON.stringify(postdata), dataType : 'JSON', contentType: "application/json", success: function(result){ window.location.href = '/ocr/check/' }, error: function(result){ ajaxAlert(false); // 비동기 통신 실패시 알림창 실행 } })
ajax 속성은 1번에서 설명했으므로 패스!
📌 비동기 통신 성공시 -> 페이지 이동 (success:)
window.location.href를 통해서 페이지 이동을 시킨다.
flask에서 url_for('ocr.check')와 같은 역할을 한다!
📌 비동기 통신 실패시 -> 통신 실패 알림창 (error:)
ajaxAlert()함수를 실행하여 통신 실패 알림창을 띄운다. sweetAlert2를 사용하였다.
// 전송하기 버튼 클릭 시 sub_btn.addEventListener('click', ()=> { // 두개의 인증 모두 했는지 확인 if(pw_status==false && joo_status==false){ ... // 위에서 설명했으므로 생략 // 두개의 인증 모두 안했을 때 else { subAlert(); // 전송 인증실패 알림창 함수 실행 } });
두개의 인증을 안했다면 subAlert() 함수를 통해 아직 두가지의 인증이 필요하다고 안내한다.
📌 비동기 통신 실패 함수와 다르다!3. Python(FLASK) 📝
if request.get_json(): # 비동기 통신의 경우
result = request.get_json() # 비동기 통신 데이터 저장
if result['kind'] == 'password': # 데이터의 종류가 password 일 경우
... # 1번 게시글에서 설명
elif result['kind'] == 'joo': # 데이터의 종류가 joo 일 경우
... # 2번 게시글에서 설명
elif result['kind'] == 'submit': # 데이터의 종류가 submit 일 경우
user.fir_joo = result['fir_joo']
user.sec_joo = result['sec_joo']
db.session.commit()
return jsonify()elif result['kind'] == 'submit': # 데이터의 종류가 submit 일 경우 user.fir_joo = result['fir_joo'] user.sec_joo = result['sec_joo'] db.session.commit() return jsonify()
AJAX로 전송받은 JSON변수의 kind키의 값이 submit일 때 실행된다.
ORM문법을 통해 주민등록번호를 DB에 저장한다.
세션을 통해서 데이터를 저장, 수정, 삭제 작업을 한 다음에는
반드시 db.session.commit()으로 커밋을 해주어야 한다.
그 후에 jsonify()함수로 비동기 통신을 성공적으로 마친다.
성공적으로 통신이 완료되면,자바스크립트 코드에서 설명한
window.location.href = '/ocr/check/'가 실행된다!
