Posted at

非同期で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");
})
});
});
});


参考