iT邦幫忙

DAY 1
3

程式和美術的大混仗系列 第 1

使用jquery跟php接json格式資料

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

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

吐出來的json格式長這樣:

    [   
        { name: "Jason", tel: "0919000000", address: "新竹" },   
        { name: "May", tel: "0928000000", address: "桃園" },   
    ]  

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

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

    $dataArr=array(   
        "date"=>"2012-01-01",   
        "shoes" => array(   
            "kind1" => 2,   
            "kind2" =>3           
    )  

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

    $.ajax({   
          url: "json.php",   
          type: "GET",   
          dataType: "json",   
          success: function(json) {   
            }   
    });  

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

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

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

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

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

    json[i]["level1"]["level2"]  

系列文
程式和美術的大混仗1

尚未有邦友留言

立即登入留言