[AJAX非同期通信を使用してSQLiteに保存し、HTML-3を表示する

潮流👀

パスワード検証->完了後、変更ボタン(ログインアカウントのパスワードと比較)

検証->完了時、変更ボタン

送信

->1,2が完了すると、ビーカーにおいて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に保存するID番号の値をそれぞれ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でページ移動を行います.
フラスコでurl_for('ocr.check')と同じ役を演じます!
📌 非同期通信が失敗した場合->通信失敗通知ウィンドウ(error:)ajaxAlert()関数を実行して、通信失敗通知ウィンドウを開きます.sweetAlert2を使用します.

// 전송하기 버튼 클릭 시
sub_btn.addEventListener('click', ()=> {
	// 두개의 인증 모두 했는지 확인
        if(pw_status==false && joo_status==false){
            ... // 위에서 설명했으므로 생략
        // 두개의 인증 모두 안했을 때
        else {
            subAlert();  // 전송 인증실패 알림창 함수 실행
        }
   });

2つの認証が行われていない場合、subAlert()関数ブートには2つの認証が必要です.

📌 비동기 통신 실패 함수와 다르다!

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構文でID番号をDBに保存します.

 세션을 통해서 데이터를 저장, 수정, 삭제 작업을 한 다음에는 
 반드시 db.session.commit()으로 커밋을 해주어야 한다.
 

その後、jsonify()関数を使用して非同期通信を正常に完了した.
通信が正常に完了すると、window.location.href = '/ocr/check/'を実行!