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