↑では、「１つのデータを送り、１つの結果を返す」というAjaxの基本的な処理を説明しました。
しかし、実際には１つのデータのやり取りでは間に合わない場合が多いです。。
ここでは、もう少し複雑なデータの扱い方を説明します。
JavaScriptとPHPは異なった言語ですので、文法も違います。
よって、それぞれデータの表現方法も異なります。
データの書き方をまず押さえておかないと、それぞれの処理を書く時にどちらがどちらか分からなくなってしまいます。
毎日のように開発を行っているプログラマでは当たり前に書き分けることはできると思いますが、私のような俄プログラマがたまにWeb開発を行うとなったら思い出すだけでも大変です。
ここで書くこともこれで良いのか、本当に理解できているのかも疑問ですが、一応テストしてみてうまく動作したことをこれで良いのではなかろうかと備忘録として書きます。
データ表現方法と言っても全てを書けないので、混同してはいけないところだけをまとめておきます。
Ajaxの基本形
まず、↑で説明しました jQuery(JavaScript)とPHPを用いたAjaxでのデータ通信の基本形を書いておきます。
ここでは、この基本形に従って、説明を加えていきます。
但し、注意しなくてはいけないポイントを書いているだけですので全体の組み立ては別に考える必要があります。
PHPからjQuery(JavaScript) へデータを返す
前後しますが、まずサーバー側(PHP)からクライアント側(jQuery)にデータを返す方法です。
PHP から jQuery にデータを返す
echo もしくは print で出力します。
PHP単独での出力では画面に表示されますが、Ajax での jQuery とのやり取りの場合、
jQuery側の
}).done(function(data){
この部分の data に返されることになります。
PHP から jQuery に配列を返す
1つのデータを返す場合は、
echo “PHP”;
というように、返したいデータを書けば jQuery に返されます。
しかし、
PHP側
$array = [ 100, "abc", 9999 ]; echo $array[0]; echo $array[1]; echo $array[2];
のように、３つの値を一つずつ出力しますと、
jQuery側
}).done(function(data){
console.log(data); → 100abc9999 と表示される
このように、「100abc9999」という1つのデータになってしまいうまくいきません。
それではと、
}).done(function(data1, data2, data3){
console.log(data1); → 100abc9999 と表示される
console.log(data2); → successと表示される
引数を３つにしたら1つ1つに入ってくるかなと思いきや、第1引数に返ってきて、2番目の引数には「success」と通信が成功したとのメッセージが入ってきます。
3番目の引数には？ 何が表示されるかやってみてください。
このように、最初の引数にPHP側で出力した複数個のデータは、つながって1つのデータとなって返ってきます。
データが返ってくるのはいいのですが、1つになってしまうとまずいですね。
返ってきたデータを分離するにも、どのようなデータがいくつ返ってくるかは分からないのでできませんし。
では、配列データをそのまま返せないのでしょうか？
$array = [ 100, "abc", 9999 ]; echo $array[]; ← エラー echo $array; ← Notice: Array to string conversion echo $array[1]; ← OK
このように、echo できないのです。
何か方法があるのでしょうか？
以上のことを何とかしなくては複数のデータを返すことができません。
PHP側でJSONに変換して返す
データの表現形式に「JSON」というものがあります。
{ "a": "100", "b": "abc", "c":"9999" }
こんな形式です。
これ、JavaScript で言うところの オブジェクトの表現形式と同じです。
オブジェクトの場合は、
{ a: 100, b: "abc", c:9999 }
のような書き方も許されますが、JSONの場合は最初に書いた形式だけです。
JSON を詳しく説明すると、1つの記事が出来上がってしまいますので、ここではこんな形式であることだけ理解しておいてください。
また、PHP 及び JavaScript では、データを JSON にエンコード・デコードする機能が用意されています。
これを使って、配列をJSON に変換してそれを出力します。
PHP側
$array = [ 100, "abc", 9999 ]; $json = json_encode( $array ) ; ← 配列をJSON形式に変換 echo $json; ← JSONデータを出力
配列のままだとecho できなかったものがJSON形式にすると出力できるのですね。
jQuery側
}).done(function(data){
console.log(data); → [100,"abc",9999]
console.log(data[0]); → [
console.log(data[1]); → 1
これで見た目は1つの配列として返ってきました。
しかし、やはり全てがつながっています。
見た目が配列でも1文字が1つの要素となってしまっていて、カンマ区切りまでの1つの要素として取り出せません。
jQuery側でJSONデコードしてみる
PHP側
$array = [ 100, "abc", 9999 ]; $json = json_encode( $array ) ; echo $json;
jQuery側
}).done(function(data){
var json = JSON.parse( data ); ← JSONデータをデコード
console.log(json); → (3) [100, "abc", 9999]
console.log(json[0]); → 100
console.log(json[1]); → abc
console.log(json[2]); → 9999
PHP側でJSONエンコードしたのだから、送られた側でデコードして元に戻してみます。
すると、うまくいきました。
まとめ PHPからデータを返すには
以上をまとめますと、PHPからデータを返すには、
・単純値
$ret = 10; echo $ret;
というよにすればOKです。
・配列
$array = [ 100, "abc", 9999 ]; echo $array;
のように、そのまま返すとうまくいかないので
$array = [ 100, "abc", 9999 ]; $json = json_encode( $array ) ; echo $json;
一旦、json_encode() でJSONデータに変換してからechoするとOKです。
一方、jquery側では
JSON.parse()
で、元の配列に戻して上げる必要があります。
Key付きのJSONデータにするには
PHPでは、
$json = { "a": "100", "b": "abc", "c": "9999" };
のように、JSON形式のデータを直接書けないようです？
しかし、これも json_encode() を使うと、JSON形式のデータを作成することができます。
ただ、単純に配列をJSON形式に変換した場合、Keyが付いてきません。
「Key」とは、
"a": "100"
の「：」の左側の部分です。
もし、Keyも入ったJSONデータを作るには、連想配列を使います。
$array = array(
"a" => "100",
"b" => "abc",
"c" => "9999"
);
このように連想配列として値をセットし、
$json = json_encode($array);
で、JSONデータに変換します。
PHP側
$array = array(
"a" => "100",
"b" => "abc",
"c" => "9999"
);
$json = json_encode( $array ) ;
echo $json;
これで、Key付きのjson データが作られますので、それをjQuery側に返します。
jQuery側
}).done(function(data){
var json = JSON.parse( data );
console.log(json);
console.log(json.a);
console.log(json.b);
console.log(json.c);
data に返されたJSONデータは、そのままではうまくいきません。
JSON.parse() でデコードして使えるJSONデータとなります。
jQuery(JavaScript) から PHP データを渡す
PHP側
jQueryから送ってきたデータを受けるには、
$data = filter_input(INPUT_GET, 'a');
の ‘a’ のようにフィルタする変数を指定しなくてはいけません。
よって、送る側の jQuery では、
var param = 999;
のように単に値をセットするのではなく、
var param = { "a": "999" };
のようにフィルタ変数となるKey(プロパティ)を持つ連想配列(オブジェクト)で、渡すデータを書く必要があります。
Key名は適当に分かりやすい名前にすればいいです。
jQuery側
var param = { a: 999 };
$.ajax({
type: "GET",
url: "ajax_test.php",
data: param,
dataType : "text"
}).done(function(data){
var param = { a: 999 };
で送るデータを param にセットし、
data: param
で param に入れたデータが、PHP側に送られます。
data: { a: 999 }
↑のように変数を使わず直接データを書くこともできます。
また、データとしてのオブジェクトの書き方ですが、
{ "a": "999" }
{ "a": 999 }
{ a: "999" }
{ a: 999 }
このように、JSON形式と違ってどれでも許されます。
但し、数値以外の文字列の場合は、「” ”」で囲ってください。
jQueryからPHPへ配列を渡す
var array = [ 100, "abc", 9999 ];
これを
data: array
として、直接に配列を渡したら、PHP側には渡りません。(undefined となります。)
上で書いたように、連想配列(オブジェクト)で渡すデータを書く必要があります。
（オブジェクトと配列ではカギ括弧の種類が異なることに注意してください）
var array = [ 100, "abc", 9999 ]; var aryJSON = JSON.stringify(array); ← JSONエンコード
とすれば、JSONデータに変換されます。
連想配列(オブジェクト)は、JSON形式でも連想配列(オブジェクト)とみなせるので、これで連想配列(オブジェクト)となります。
しかし、これをこのまま渡してもKey(プロパティ)がないので、PHP側で受け取ることができません。
そこで、もう一段加工して、Key(プロパティ)を加えて、連想配列(オブジェクト)を作ります。
var json = { a: aryJSON };
これを渡せば、PHP側で a をフィルタ変数として、aryJSON を取り出せます。
PHP側
$data = filter_input(INPUT_GET, 'a'); $array = json_decode( $data , true ) ; ← JSONデコード echo $array[0]; → 100 echo $array[1]; → abc echo $array[2]; → 9999
受け取ったJSONデータをデコードすれば、配列を渡したことになります。
まとめ
以上のように、データの受け渡しだけなのですが、ややこしいところがあります。
それも、冒頭で書いたように、「JavaScriptとPHPは異なった言語」であるからです。
それぞれの文法を把握していないとうまくいかずでどのようにしていいか分からなくなってきます。
言えることは、受け渡しにJSONを使えばうまくいくということです。
jQueryとPHPでのJSONを扱う関数
jQuery エンコード：JSON.stringify() デコード：JSON.parse()
PHP エンコード：json_encode() デコード：json_decode()
このように、jQuery・PHP のどちら側にもJSONをエンコード／デコードする関数が用意されていますので、この関数の使い方を把握しておいてください。
デバッグライト
この記事を書く上において、いろいろとテストしてきたわけですが、データが正確に受け渡しできているかは画面に表示してみなくては確認できません。
基本的には、
jQuery側
alert()、console.log()、$("#result").text(data); ←このようにjQueryでページに表示
PHP側
echo、print()、var_dump()
のような機能を使って表示すればいいのですが、Ajaxでやり取りしていると、PHP側での出力はjQuery側へ返してしまいます。
ですので、PHP単独で画面に表示するようなことができずにjQuery側で返ってきたデータを表示して確認しなくてはいけません。
これは面倒ですし、PHPでどのように受け取っているかなどが純粋に表示できない場合があります。
そこで、役に立つのはChromeに搭載されている「Google Developper tools(DevTools)」です。
Windowsでは F12 キー もしくは、Shift＋Ctrl＋I で起動します。
DevTools の詳しい使い方は別の機会に譲りますが、デバッグライトとしては「Console」「Network」のタブを切り替えて確認することになります。
Console 画面に console.log() で出力した結果が表示されます。
これ、最初の頃はconsole.log() でどこにも表示されずに「どういうこと？」とConsole 画面に行き着くまで苦労した思い出があります。
Network 画面で、PHPの出力結果が確認できます。
ここを使うと、jQuery側に返す前のPHPの出力結果を見ることができます。
Ajaxでやり取りするhtml をリクエストすると、画面左側にNAME欄が表示され、そこにやり取りするPHPのファイル名が出てきますのでそれを選択しますと、右側に渡ってきた値や出力結果が表示され確認することができます。
最後に
渡し方・返し方、またデータの表現方法は他にもやり方があるようです。
しかし、いろいろな手法を使う前に、まずは正確にやり取りできるように1つの使い方を理解すべきではないでしょうか。
この記事を書く上において、ネットを徘徊して情報を探したのですが、することは同じでも手法が違う場合が多々あり、同じことなのかどうか判断に迷う場合がいくつもありました。
こうかな・ああかなというようにテストしながらたどり着いた手法がここに書いた内容です。
どなたか、もっと理解しやすく簡潔な方法があれば教えていただきたく思います。
また、まちがっている箇所もご指摘ください。
コメント