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傳遞過來的訊息了。