ぶろぐ

日記です

jQueryでJSONデータを受け取る方法

JavaScript

jQueryのpostメソッドを使用して受け取る方法。

説明

JSONデータを出力するページにpostメソッドでアクセスし、データをいただきます。
いただくデータはtypeで指定します。
typeにJSONを指定するとdataはオブジェクトに格納されて帰ってくるようです。
HTMLを指定すると、テキストデータで格納されます。
今回はJSONデータを受け取るので、typeにJSONを指定します。

使い方

jQuery.post( url, data, callback, type )

url:問い合わせるURLを指定
data:urlに送るデータを指定
callback:POSTが成功した時に実行されるコールバック関数。引数にdataが入ります。
type:受け取るデータのタイプ。json,xml,htmlなど。

サンプルソースコード*

<html><head>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function showJSON(){

  $.post(
    "json_encode.php",  //URLを
    {"post1":"value1"}, //ダミー
    function(data){
      alert(data["age"]);  //オブジェクトの中身を参照
      alert(data["name"]);
      alert(data["job"]);
      alert(data);//typeにJSONを指定するとdataはオブジェクトになるのでエラーです。
    },
    "json"
  );

}
</script></head><body>
<button onclick="showJSON()">読み込む</button>
<div id="show_json"></div>
</body></html>

実行結果

実行結果を表示する
データを出力するダイアログがいくつか表示されます。
JSONを出力するPHPプログラムはPHPで配列をJSONで取得する方法で作ったものを使っています。
PHPが出力するJSONデータは以下の通りです。

{"name":"takuan","age":"22","job":"PG内定"}