javascript和php使用ajax通訊傳遞JSON

流火行者發表於2015-06-26
JavaScriptPHPJSON

JS和PHP直接通訊常用ajax完成，以實現js上UI的動態變化。通訊使用JSON或者XML傳遞資料。下面詳細描述兩者直接JSON字串的傳遞。

下面案例是要傳遞這樣的json資料：

{
    "bookid": "558a6be36c72a" ， 
    "resitems": [
        {
            "res_id": "558a6bff6bd55",
            "res_name": "IMG_8421.jpg",
            "src_origin": "558a6bff6bd55.jpg",
            "src_hd": "558a6bff6bd55_hd_1920_1280.jpg",
            "src_sd": "558a6bff6bd55_sd_1024_682.jpg",
            "src_td": "558a6bff6bd55_td_300_200.jpg"
        },
        {
            "res_id": "558a6c4a716a2",
            "res_name": "IMG_8477.jpg",
            "src_origin": "558a6c4a716a2.jpg",
            "src_hd": "558a6c4a716a2_hd_1920_1280.jpg",
            "src_sd": "558a6c4a716a2_sd_1024_682.jpg",
            "src_td": "558a6c4a716a2_td_300_200.jpg"
        }
    ]
 
}

 

ajax:

首先要熟悉ajax的用法，它是連線瀏覽器和伺服器的橋樑。

一般用法如下：

    $.ajax({
        type:"POST",
        url:"SQLHelper.php",
        dataType:'json',
        async:false,
        data:{'json':jsonStr}
        });

其中type的型別可以是GET和POST，url是伺服器處理的指令碼程式。dataType型別有text,json,xml等等，async通常使用false，data是具體要傳遞的json字串，並且給伺服器post一個叫做json欄位的資料，PHP端可以$_POST['json']就可以獲取post過來的資料。如果需要接收返回資料，

  var req= $.ajax({
        type:"POST",
        url:"SQLHelper.php",
        dataType:'json',
        async:false,
        data:{'json':jsonStr}
        });
var response=req.responseText;

上面使用ajax實現了一次普通的客戶端到伺服器的一次資料傳遞。下面的問題是怎麼去獲得上面的jsonStr呢？像開篇提及的那種json字串怎麼才能生成的問題 附：如果遇到含有中文的url 如下操作：

     location=encodeURI('content_p.html?id='+catalogid+'&title='+bookTitle+'&thumb='+bookThumb);

 

JavaScript->PHP:

使用js陣列來完成json物件的封裝：

 1      var arrX={resitems:[]};
 2      arrX.bookid=bookid;
 3      for (var i=0; i < cellList.length; i++) {
 4          var item=cellList[i];
 5           var jsonRes={};
 6          jsonRes.bookid=bookid;
 7          jsonRes.res_id=item.itemStruct.id;
 8          jsonRes.res_name=item.itemStruct.name;
 9          jsonRes.src_origin=item.itemStruct.src;
10          jsonRes.src_hd=item.itemStruct.src_hd;
11          jsonRes.src_sd=item.itemStruct.src_sd;
12          jsonRes.src_td=item.itemStruct.src_td;
13          arrX.resitems.push(jsonRes);
14      };
15     
16      var jsonResStr=JSON.stringify(arrX);

上面的程式碼是先建立arrX的json物件，對物件新增各種屬性、變數等。最後通過stringify轉化為字串，這個獲得的字串jsonResStr就是一個普通字串了，可以通過ajax傳遞到伺服器了，值得注意的是，這裡如果有中文，那是沒問題的，不會出現亂碼問題。在完成了JOSN封裝之後，開始使用ajax傳遞到PHP頁面

     $.ajax({
         type:"POST",
         url:"SQLHelper.php",
         dataType:"json",
         async:false,
         data:{'jsonResPanel':jsonResStr},
         success:function(json){}
     });

php對接收到的json資料解析並且寫入到資料庫：

 1     if (isset($_POST['jsonResPanel'])) {
 2         $data=$_POST['jsonResPanel'];
 3         $arr=(array)(json_decode($data));
 4         $items=(array)($arr['resitems']);
 5         $bookid=$arr['bookid'];
 6         $sql="";
 7         for ($i=0; $i < count($items); $i++) { 
 8             $value=(array)($items[$i]);
 9             $bookid=$value['bookid'];
10             $res_id=$value['res_id'];
11             $res_name=$value['res_name'];
12             $src_origin=$value['src_origin'];
13             $src_hd=$value['src_hd'];
14             $src_sd=$value['src_sd'];
15             $src_td=$value['src_td'];
16             $sql.="insert into resourcesheet(bookid,res_id,res_name,src_origin,src_hd,src_sd,src_td)values
17             ('{$bookid}','{$res_id}','{$res_name}','{$src_origin}','{$src_hd}','{$src_sd}','{$src_td}');";
18         }
19         $sqli=new SQLHelper('ugumanage');
20         //先刪除bookid下所有資源
21         $sqlDelete="delete from resourcesheet where bookid='{$bookid}'";
22         $sqli->execute_dml($sqlDelete);
23         $sqli->multi_execute_dml($sql);
24         $sqli->close_connect();
25     }

需要注意的是第三號在拿到json字串之後便使用json_decode函式解析成物件，這個時候只是一個普通php物件，無法給我提供有效資訊，需要將它強制轉換為陣列array即可變為我們熟悉的php陣列，在拿到資訊的陣列之後，我們便可以像操作普通php陣列那樣提取json傳遞過來的所有資訊了，上面程式碼將json的部分資訊新增到資料庫的一張表裡邊，當然如果傳遞的json字串過長，建議使用GZip在客戶端對字串壓縮之後再傳遞，接收端解壓縮即可。

PHP->JavaScript：

如果客戶端需要查詢資料庫的資料，必然需要要求伺服器查詢，由php將查詢結果通過json返回給客戶端。

首先客戶端通過ajax傳送查詢請求給php

 1 var request=$.ajax({url:'SQLHelper.php?loadResPanel='+bookid,async:false});

2 var jsonStr=request.responseText; 

第二行表示得到了查詢結果，下面來看看在php端是怎麼生成這個結果並返回的。

 1     if (isset($_REQUEST['loadResPanel'])) {
 2         $bookid=$_REQUEST['loadResPanel'];
 3         $sqli=new SQLHelper('ugumanage');
 4         $arr=array();
 5         $arrItems=array();
 6         $arrInfo=array();
 7         $head=urlencode("http://{$_SERVER['HTTP_HOST']}/cloud/");    
 8         $sql0="select *from contentsheet where bookid='{$bookid}'";
 9         $res0=$sqli->execute_dql($sql0);
10         while ($row0=$res0->fetch_assoc()) {
11             $catalogid=$row0['catalogid'];
12             $bookid=$row0['bookid'];
13             $title=urlencode($row0['title']);
14         }
15         $sql1="select *from resourcesheet where bookid='{$bookid}'";
16         $res1=$sqli->execute_dql($sql1);
17         while ($row1=$res1->fetch_assoc()) {
18             $item=array('bookid'=>$row1["bookid"],'res_id'=>$row1['res_id'],'res_name'=>urlencode($row1["res_name"]),
19             'src_origin'=>$row1["src_origin"],'src_hd'=>$row1["src_hd"],'src_sd'=>$row1["src_sd"],'src_td'=>$row1["src_td"]);
20             array_push($arrItems,$item);
21         }
22 
23 
24         $arrInfo['head']=$head;
25         $arrInfo['catalogid']=$catalogid;
26         $arrInfo['bookid']=$bookid;
27         $arrInfo['title']=$title;
28         $arr['info']=$arrInfo;
29         $arr['items']=$arrItems;
30         $json=urldecode(json_encode($arr)) ;
31         echo $json;
32         $sqli->close_connect();
33     }

值得注意的是第七行這種，遇到特殊符號或者中文字元，在php端需要將它們統一轉碼，具體轉成了什麼，我們不用關心，只需要知道在外面套一個urlencode函式就可以了。建立json同樣是使用陣列，編制好陣列之後，通過json_encode可以直接將其轉化為json字串。這裡在返回給客戶端之前，仍然需要再使用urldecode解碼，這樣傳遞出來的json字串才不會有亂碼現象。

客戶端接收到json字串後同樣需要對它進行解析成javascript物件。

 1     var request=$.ajax({url:'SQLHelper.php?loadResPanel='+bookid,async:false});
 2     var jsonStr=request.responseText;
 3 
 4     var jsonObj=JSON.parse(jsonStr);
 5     var info=jsonObj.info;
 6     var items=jsonObj.items;
 7 
 8     document.getElementById('textBox').value=info.title;
 9     for (var i=0; i < items.length; i++) {
10           var item=new UploadItemStruct();
11         item.id=items[i].res_id;
12         item.head=info.head;
13         item.name=items[i].res_name;
14         // item.type=$(this).attr('type');
15         item.src=items[i].src_origin;
16         item.src_hd=items[i].src_hd;
17         item.src_sd=items[i].src_sd;
18         item.src_td=items[i].src_td;
19         addCellSubThree(document.getElementById("divPanel"),item);    
20     };


注意的是第四行。解析json的關鍵方法是JSON.parse方法，json字串變成javascript物件之後，便可以任意提取json傳遞過來的訊息了。

 

相關文章