使用jquery跟php接json格式資料

之前講到用jquery接xml格式資料，現在就是用公司在接的json格式來接了，跟接xml格式很像，了解怎麼用jquery的ajax方法，稍微轉換一下就可以了。

首先請php吐一個json格式的檔案出來

view plaincopy to clipboardprint?

1. <?php   
2.  $city = array();   
3.  $city["0"] = array ("name"=>"Jason", "tel"=>"0919000000", "address"=> "新竹");   
4.  $city["1"] = array ("name"=>"May", "tel"=>"0928222222", "address"=> "桃園");   
5.  echo json_encode($city);   
6. ?>  

吐出來的json格式長這樣：

view plaincopy to clipboardprint?

1. [   
2.     { name: "Jason", tel: "0919000000", address: "新竹" },   
3.     { name: "May", tel: "0928000000", address: "桃園" },   
4. ]  

json是一種javascript的物件，因為他本身是javascript，轉換起來沒問題，加上不像xml這麼肥，所以這幾年來很流行。

因為他類似xml，所以我們也可以做巢狀的結構，像這樣包起來。

view plaincopy to clipboardprint?

1. $dataArr=array(   
2.     "date"=>"2012-01-01",   
3.     "shoes" => array(   
4.         "kind1" => 2,   
5.         "kind2" =>3   
6.            
7. )  

真正在應用的時候會把資料庫撈出來的資料，用迴圈的方式弄成json的格式，再用ajax去parse出來。

view plaincopy to clipboardprint?

1. $.ajax({   
2.       url: "json.php",   
3.       type: "GET",   
4.       dataType: "json",   
5.       success: function(json) {   
6.         }   
7. });  

接成功後再把資料撈出來就可以了。

view plaincopy to clipboardprint?

1. var NumOfData = json.length; //取出物件長度   
2. //繞行把資料alert出來   
3. for (var i = 0; i < NumOfData; i++) {   
4.      alert("Name: "+data[i]["name"]);      
5.      alert("Tel: "+data[i]["tel"]);       
6.      alert("Address: "+data[i]["address"]);    
7. }  

所以你可以這樣把資料append到DOM裡。

view plaincopy to clipboardprint?

1. var $div=$("div");   
2. for (var i = 0; i < NumOfData; i++) {   
3.     $div.append("Name: "+json[i]["name"]+", Tel: "+json[i]["tel"]+", Address: "+json[i]["address"]);   
4.     $div.append("<br/>");   
5. }  

如果要取到第二層資料，則是這樣

view plaincopy to clipboardprint?

1. json[i]["level1"]["level2"]  

像這樣來把資料弄到頁面上真的很方便阿，可以試試看。

參考資料：
[jQuery]jQuery取得JSON資料
JQuery JSON 簡例