どもです。
今回の課題は、jQueryからphpを実行して、返り値に配列を受け取って再びjsで処理 です。
ajaxは不慣れなので、基本から踏まえましょう。
Menu
①基本形
※新
$.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の値を受け取れる。
しかし非推奨らしい。有難いのになぁ。
ユーザー体験に対して好ましくない影響があるため、メインスレッドでの同期 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でやり取りできるのは文字列データだけというところだけ押さえれば、如何様にも応用は利きそうですね。