[Flask] AJAX 비동기 통신으로 SQLite에 저장하고 HTML 렌더링 하기 - 3

mason.98·2021년 12월 9일
0

Flask

목록 보기
8/10
post-thumbnail

흐름 👀


  • 비밀번호 인증 -> 완료 시, 버튼 변경 (로그인 계정의 비밀번호와 비교)
  • 유효성검사 -> 완료 시, 버튼 변경
  • 전송하기 -> 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/'가 실행된다!

profile
wannabe---ing

0개의 댓글