ブログランキング・にほんブログ村へ


iPhone/iPad用潜水艦ゲームアプリ ソナーエコー iTunesにて公開中

2013年06月20日

[jquery] jqueryの$.ajaxで complete等の後処理関数に値を渡したい

jqueryのajaxはとっても便利なんだけど、completeなどの後処理関数に値を渡す方法をずっと調べてなかったんで調査・実装。

どういう時かっていうと、ajaxの通信のひな形は同じだけど、パラメータのささいな違いで後処理が全然違うとかそういうパターン。
phpとかとやりとりするときなんかは割と多いケースの気がする。

// ajax通信
my_ajax: function( dataObj,completeFunc ){
$.mobile.showPageLoadingMsg();

$.ajax({
__completeFunc: completeFunc,

type: "POST",
url: "http://www.xxxxxx.com/xxxxx.php",
data: dataObj,
dataType: "json",
complete: function( data, status ){
var json = JSON.parse( data.responseText );

switch( json.status ){
case "ok":
this.__completeFunc( json );

break;
default:
//なんかエラー処理
break;
}
$.mobile.hidePageLoadingMsg();
},
error: function(XMLHttpRequest,textStatus,errorThrown ){
$.mobile.hidePageLoadingMsg();
//なんかエラー処理
}
});
}

こんなふうにぶつからないように自前パラメータを追加する。
この例では
__completeFunc
という成功時の処理関数を渡している。.phpの戻り値のjsonの"status"の項目が"ok"のときのみ処理する関数。

キモは、completeの中からみると、$.ajaxに渡したパラメータをもったオブジェクトはthisになってるってこと。
はじめdata のほうかと思った。javascriptのスコープ的に当然のことなのかもしれない。そこまでjavascript突っ込みたくないんでここは経験則的理解でいいや。

で呼び出し側は

this.my_ajax(
{
"mode": "getinfo",
"id": this.id,
"pw": this.pw,
},
function( json ){
//通信成功時の処理をここにかく
}
);

何回か呼び出してとこがあったりするとだいぶすっきりする。

通信IFの仕様変更とかあっても対応しやすくなる。
posted by みこあいさ at 11:08| JavaScript