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

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

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

2017年8月18日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。

今回の課題は、jQueryからphpを実行して、返り値に配列を受け取って再びjsで処理 です。
ajaxは不慣れなので、基本から踏まえましょう。

①基本形

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

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

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

※js新
$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value }
}).fail(function(){
	alert('error');
}).done(function(re){
	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
	$key = $_POST['key'];
	$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が違うので留意。

旧ブラウザを考慮しないならdataType:'json'を使う

このjsonというデータタイプでjs-php間をやり取りする利点は多く、例えばクロスサイトスクリプティングを防げるなど、単なる文字列を扱う場合でもjsonを使いたいところです。

ということで、IE7以下とかいう化石を無視するならajaxはjson安定です。

$.ajax({
	type:'POST',
	url :'実行したいphpファイル',
	data:{ key:value },
	dataType:'json'
}).fail(function(){
	alert('error');
}).done(function(re){
	console.log(re);
});
※php
	$key = $_POST['key'];
	$re  = ["配","列","を","取","得"]
	header("Content-Type: application/json; charset=UTF-8");
	header("X-Content-Type-Options: nosniff");
	echo json_encode($re);

js、phpのどちらかの対応でOKのようです。
データタイプをjsonにした場合、戻り値reは既にJSON.parseされています。よき。

番外:ajaxでも同期通信という選択肢

ajaxといえば非同期通信だが、単にPHPで処理したいからajaxを使うのであって、非同期通信である必要が無い場合もある。
非同期通信は可読性が極端に悪いので、ajaxでも同期通信を行えることを覚えておきたい。

※js
let re = $.ajax({
		type :'POST',
		url  :'実行したいphpファイル',
		async: false
	}).responseText;
let result = JSON.parse(re);

方法は「async」にfalseを設定すること。
また「.responseText」をつけることで、非同期の場合と同じくechoの値を受け取れる。

しかし非推奨らしい。有難いのになぁ。

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
ユーザー体験に対して好ましくない影響があるため、メインスレッドでの同期 XMLHttpRequest は推奨されません。詳しくは https://xhr.spec.whatwg.org/ を参照してください。

番外2:$.ajaxSetupを使ってみる

※js
$.ajaxSetup({
	type :'POST',
	url  :'実行したいphpファイル',
	async: false,
	cache: false,
	timeout: 10000,
	dataType:'json'
});

let send = {
	d: '送りたいデータ'
}
	
let re = $.ajax({ data: $.param(send) }).responseText;

実行したいajaxが複数ある場合や、設定と送りたいデータを別で管理したい場合などは、$.ajaxSetupであらかじめ設定値をセットして使いまわすこともできる。

番外3:配列が複雑なら、XMLで送ってみるのも一手

未検証ですが、PHP側でXMLを作成してjsで展開する手段を使えば、連想配列や多重配列といったややこしいものも扱えそうです。

どのみち、ajaxでやり取りできるのは文字列データだけというところだけ押さえれば、如何様にも応用は利きそうですね。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (3)
  • (・∀・) 参考になった (4)
  • (`・ω・´) 役に立った (4)