ど素人から毛を生やす。<延>

jQueryのajaxでphpを実行して、配列を返り値にして再びjsで処理したい

Web > javascript 2017年8月18日(最終更新:29日前)

どもです。

ajax、苦手です。

苦手というか、不慣れといった方がいいかもしれません。
以前の仕事では覚える必要性の無いものだったので。

それはともかく、
今回の課題は、jQueryからphpを実行して、返り値に配列を受け取って再びjsで処理 です。

①基本形

※新
$.ajax({
    type: 'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
}).fail(function(){
    alert('error');
}).done(function(){
    alert('success');
});
※旧
$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
	,error:function(){
		alert('error');
	}
	,success:function(){
    	alert('success');
	}
}

jQuery1.8で新しい書き方になっていて、現在旧仕様は非推奨。
僕が今回携わった環境は古ぅいところなので旧仕様でしたが、新規で書くなら上。

パラメータについては、以下のサイト様を参照。見た感じ、ここが新仕様かつ分かり易い。
jQuery:一般的なAjax通信を実装するには?($.ajax)- Build Insider

②phpから値を受け取って処理したい

※新
$.ajax({
    type: 'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
}).fail(function(){
    alert('error');
}).done(function(re){
    成功時の処理
})always(function(){
	成功・失敗に関わらず、返り値reや実行したajaxに関係する処理
});
※旧
$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
	,error:function(){
		alert('error');
	}
	,success:function(re){
    	成功時の処理
	}
	,complete:function(){
		成功・失敗に関わらず、返り値reや実行したajaxに関係する処理
	}
}

ajaxは他のjsの流れと切り離されるため、$.ajax({})の外に後続処理を記述してしまうと
そちらが先に実行されてしまう。
返り値を使用したい処理は、必ずalways(complete)に記述すること。

③phpから配列を受け取りたい

※js新
$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
}).fail(function(){
    alert('error');
}).done(function(){
   result = JSON.parse(re);
});
※js旧
$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
	,error:function(){
		alert('error');
	}
	,success:function(re){
		result = JSON.parse(re);
		//result = re.split(","); //IE7以下に対応する場合
	}
}
※php
	$re = ["配","列","を","取","得"]
	echo json_encode($re);
	//echo implode( "," , $re); //IE7以下に対応する場合
  • ajaxに値を返すときは、returnではなくecho
  • しかし配列をechoすると、Arrayとしか出力されない
  • そこでjson_encodeを使用すると、["配","列","を","取","得"]の形で値を返せる
  • この状態は配列ではなく文字列なので、JSON.parseで再加工してやると配列になる
  • 但し、IE7以下ではJSONが使えないので、もしもIE7以下に対応する必要があるなんて場合は、
    php側でimplode、jsでsplitを使用することで文字列←→配列変換を行うと良い。
    要素にデリミタと同じものが含まれると壊れるのが問題だが。
  • jsonとimplode-splitでは、戻り値が空のときに生成されるresultが違うので留意。
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (`・ω・´) 役に立った (0)
  • (・∀・) 参考になった (1)