【JQuery】ajax呼び出し共通化
ajaxの呼び出し部分を共通化して、成功・失敗時の動きとかを統一する用
deferred使わないと非同期で処理が実行されるので、共通化したときにdataが受け取れなかったので忘れないようにメモ
// ajax呼び出し共通 function ajaxAction({実行URL}, {パラメータ}) { var deferred = new $.Deferred(); // ※1 $.ajax({ url: { 実行URL }, type: 'POST', data: { パラメータ }, cache: false, // ※2 }).then( //成功処理 function (data) { console.log('ajax成功:共通部分'); // 成功時の共通処理とか書く deferred.resolve(); // こうすると呼び出し側で個別の処理ができる }, //失敗処理 function (data) { console.log('ajax失敗:共通部分'); // 失敗時の共通処理とか書く deferred.rejected(); // こうすると呼び出し側で個別の処理ができる }, ); return deferred; } // ajax呼び出し例 function hogeAction () { console.log('ajax呼び出し前'); var hostUrl = '/hogeURL/hogeAction'; // URL var param = { aaa: "123" }; // パラメータ var deferred = ajaxAction(hostUrl, param); // 実行 deferred.done(function (data) { // 成功時の個別処理とか書く console.log('ajax成功:個別部分'); console.log(data); }); deferred.fail(function (data) { // 失敗時の個別処理とか書く console.log('ajax失敗:個別部分'); console.log(data); }); // ajax処理を待たずに実行する場合の処理 console.log('ajax呼び出し後(実行結果を待たない)'); };
※1
ajaxの処理が完了してから行いたい作業がある場合に使用するオブジェクト
非同期で問題ない場合はdeferredの処理を除外する
※2
一度ajaxに成功するとクライアントにcacheを生成してしまう。
次回以降にcacheを読まないようにする