非同期でPOSTして、POSTの成否をアラートで通知

非同期でPOSTして、POSTの成否をアラートで通知:

非同期でPOSTして、POSTの成否をアラートで通知したい。

• POST 前には validation を行い、OKの場合のみPOSTを呼ぶ
• success 時だけでなく、error 時にも処理したいので、$.ajax を用いる。
• アラートメッセージは、alertでは味気ないので、Sweet Alert を用いる。

実装

Sweet Alert の準備

Sweet Alertを読み込む。

<!-- Sweet Alert https://sweetalert.js.org/ --> 
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> 

POST

• バリデーションする
  
  
  • validationEngine を用いてバリデーションを行う
  • エラーがあればワーニングメッセージを表示し、処理を抜ける
• POSTする
  
  
  • フォームはシリアライズして送っている
  • /api/hogehoge/　にPOSTしている
  • POSTの成否をメッセージで通知

$(function () { 
    $('#btnRegister').click(function () { 
 
      var validateResult = $("#register").validationEngine('validate'); 
      if (validateResult == false) { 
        swal( "入力エラー", "エラーメッセージを確認の上、修正してください", "warning"); 
        return; 
      } 
 
      var formData = $('#register').serialize(); // フォームデータ 
      $.ajax({ 
          url: "/api/hogehoge/", 
          type: "POST", 
          data: formData, 
          success:  (function(){ 
            swal("登録しました", "登録が完了しました。\nありがとうございます。", "success"); 
          }), 
          error:  (function(){ 
            swal("登録に失敗しました", "登録に失敗しました。\n確認してください。", "error"); 
          }) 
      }); 
    }); 
  }); 

参考

• SweetAlert
• JQuery の ajax で POST を非同期で送る