jQueryとPHP間のデータインタフェースにAjaxを使用し、次の構文に従い、json形式でデータ交換を行います。
$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
HTTPのGET通信を行い、json形式に変換されたデータをサーバから受け取ります。 JSONファイルは、同一ドメイン間でなければ読み込みができない制限がありましたが、jQuery1.2では、JSONPのコールバック関数を指定すれば、別のドメインにあるJSON形式のデータを、読み込む事が可能になりました。
【注意】この関数以下のコードは、コールバック関数が呼ばれる前に実行されます。
- url:
- リクエストの送信先URLを指定します。
- data:
- サーバに送信する値をマップ値で指定します。 サーバーに送信される前にURLエンコードが施されたURLクエリーの文字列に変換されます。
- success(data, textStatus, jqXHR):
- リクエスト成功時の処理を関数として指定します。 関数の引数としてdata, textStatus, jqXHRnの3つの値を受け取る事が出来ます。
- 戻り値:
- XMLHttpRequestオブジェクト
JsonデータをAjaxで転送するデモソフト
getJSON関数にパラメータを与え、PHP側でこのパラメータを加工して名称とし、メールアドレスを付与して呼び出し元に、json形式でデータを戻します。
Ajaxのサーバ側PHPファイル「res.php」
<?php $user_name = $_GET['user_name']; $user = array( array( 'name' => $user_name ."1", 'email' => $user_name."10@localhost" ), array( 'name' => $user_name ."2", 'email' => $user_name."11@localhost" ) ); header('Content-type: application/json; charset=UTF-8'); echo json_encode($user); ?>
JSONの「Content-Type」は、「application/json」と、RFCで決められています。ただし、「application/json」で出力していると、ブラウザで確認しようとした場合、ダウンロードした内容を確認しないといけないので、作ってる過程では、ブラウザに表示させるために、次のようにしておきます。
header(“Content-Type: text/javascript; charset=utf-8”);
AjaxのクライアントjQueryファイル
Json形式で受け取ったオブジェクトをリスト形式に編集して、ID:#outputに追加します。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script> $(function(){ var name="hoge"; $.getJSON("res.php",{"user_name":name},function(data){ for(var i in data){ $('#output').append("<li>" + data[i].name + " " + data[i].email + "</li>"); } }); }); </script> </head> <body> <ul id="output"></ul> </body> </html>
実行結果を次に示します。
・hoge1 hoge10@localhost ・hoge2 hoge11@localhost