フロントでサーバにアクセスしてJSONを取得して、ページに表示する。
全てのAPIの基礎中の基礎になっている部分だ。
今回は必要最小限でそれを実装してみた。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>[PHP,JS] Ajaxでjsonを返す</title> </head> <body> <div id="result"> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var $result = $('#result'); $.ajax({ 'url': 'products.php', 'type': 'GET', 'dataType': 'json }) .done(function(products) { for(var product of products) { var text = 'ID: ' + product.id; text += ' 商品名: ' + product.name; text += ' 価格: ' + product.price; var $div = '<div>' + text + '</div>' $result.append($div); } }) .fail(function(j,t,e) { console.error(e); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php $products = [ [ 'id' => 1, 'name' => 'ビール<strong>赤坂店</strong>', 'price' => 300 ], [ 'id' => 2, 'name' => 'ハイボール<strong>恵比寿店</strong>', 'price' => 240 ], [ 'id' => 3, 'name' => '赤ワイン<strong>六本木店</strong>', 'price' => 700 ] ]; $json = json_encode( $products, JSON_UNESCAPED_SLASHES // スラッシュをエスケープしない | JSON_UNESCAPED_UNICODE // 文字列をUnicodeにエスケープしない ); // ヘッダーにJSONで返すことを伝える header("Content-Type: application/json"); echo $json; ?> |
解説
index.htmlは不要だと思うので省略する。
main.jsでAjax通信を行う
ajaxの通信をjQueryを使って行なっている。
jQueryでのajaxはメソッドチェーンを使っていて、感覚的にわかりやすい
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var $result = $('#result'); $.ajax({ // アクセスするためのパラメータ 'url': 'products.php', // 接続先URL（相対パスでもOK) 'type': 'GET', // 接続方式(GET, POSTなど) 'dataType': 'json // 取得するデータ形式(json, textなど) }) .done(function(products) { // 成功時の処理 for(var product of products) { var text = 'ID: ' + product.id; text += ' 商品名: ' + product.name; text += ' 価格: ' + product.price; var $div = '<div>' + text + '</div>' $result.append($div); } }) .fail(function(j,t,e) { // エラー時の処理 console.error(e); // j -> jqXHR , t -> textStatus, e ->errorThrown }); |
doneでサーバから返却された値を引数にするコールバック関数を実行して、DOMを構築している。
もし、エラーが発生したら、failのコールバック関数が実行される
引数は以下の通り
| 引数 | 説明 |
| jqXHR | $.ajax()が返すプロミスオブジェクト |
| textStatus | 通信のステータスを表す文字列 |
| errorThrown | エラーの意味を表す文字列 |
products.phpでJSONデータを返す
PHPでJSONを返却するときにはjson_encode関数を使って辞書配列をJSONデータに変換する必要がある。
|
1 2 3 4 5 |
$json = json_encode( $products, JSON_UNESCAPED_SLASHES // スラッシュをエスケープしない | JSON_UNESCAPED_UNICODE // 文字列をUnicodeにエスケープしない ); |
第一引数には変換したい配列データを入れる。
第二引数には変換する際のオプションを設定する。
今回の引数は以下の通り
| 変数 | 説明 |
| JSON_UNESCAPED_SLASHES | スラッシュをエスケープしない |
| JSON_UNESCAPED_UNICODE | 文字列をUnicodeにエスケープしない |
JSON_UNESCAPED_SLASHESによって、文字列内に"/"が含まれるHTMLのDOMデータをエスケープしなくなる。
JSON_UNESCAPED_UNICODEによって、文字列をUnicode文字に変換しなくなる。
変換したら、後は標準出力してやるだけ
|
1 2 3 |
// ヘッダーにJSONで返すことを伝える header("Content-Type: application/json"); echo $json; |
ここで気をつけるのはヘッダー情報にJSONで返すことを明記しておくこと。
ajaxでデータを受け取る型をJSONにいるから、こちらも合わせておかないといけない。
そして最後に標準出力メソッドのechoでJSONデータを返して終わり。