2012年1月5日 星期四

使用jquery跟php接json格式資料

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

首先請php吐一個json格式的檔案出來
  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格式長這樣:
  1. [   
  2.     { name: "Jason", tel: "0919000000", address: "新竹" },   
  3.     { name: "May", tel: "0928000000", address: "桃園" },   
  4. ]  
json是一種javascript的物件,因為他本身是javascript,轉換起來沒問題,加上不像xml這麼肥,所以這幾年來很流行。

因為他類似xml,所以我們也可以做巢狀的結構,像這樣包起來。
  1. $dataArr=array(   
  2.     "date"=>"2012-01-01",   
  3.     "shoes" => array(   
  4.         "kind1" => 2,   
  5.         "kind2" =>3   
  6.            
  7. )  

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

  1. $.ajax({   
  2.       url: "json.php",   
  3.       type: "GET",   
  4.       dataType: "json",   
  5.       success: function(json) {   
  6.         }   
  7. });  
接成功後再把資料撈出來就可以了。
  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裡。
  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. }  

如果要取到第二層資料,則是這樣
  1. json[i]["level1"]["level2"]  

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

參考資料:
[jQuery]jQuery取得JSON資料
JQuery JSON 簡例
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...