欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript和php使用ajax通信傳遞JSON的實例

 更新時間：2018年08月21日 09:46:51   作者：Microtiger  
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

JS和PHP直接通信常用ajax完成，以實現(xiàn)js上UI的動態(tài)變化。通信使用JSON或者XML傳遞數(shù)據(jù)。下面詳細描述兩者直接JSON字符串的傳遞。

下面案例是要傳遞這樣的json數(shù)據(jù)：

{
 "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的用法，它是連接瀏覽器和服務(wù)器的橋梁。

一般用法如下：

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

其中type的類型可以是GET和POST，url是服務(wù)器處理的腳本程序。dataType類型有text,json,xml等等，async通常使用false，data是具體要傳遞的json字符串，并且給服務(wù)器post一個叫做json字段的數(shù)據(jù)，PHP端可以$_POST['json']就可以獲取post過來的數(shù)據(jù)。如果需要接收返回數(shù)據(jù)，

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

上面使用ajax實現(xiàn)了一次普通的客戶端到服務(wù)器的一次數(shù)據(jù)傳遞。下面的問題是怎么去獲得上面的jsonStr呢？像開篇提及的那種json字符串怎么才能生成的問題 附：如果遇到含有中文的url 如下操作：

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

JavaScript->PHP:

使用js數(shù)組來完成json對象的封裝：

var arrX={resitems:[]};
  arrX.bookid=bookid;
  for (var i=0; i < cellList.length; i++) {
   var item=cellList[i];
   var jsonRes={};
   jsonRes.bookid=bookid;
   jsonRes.res_id=item.itemStruct.id;
   jsonRes.res_name=item.itemStruct.name;
   jsonRes.src_origin=item.itemStruct.src;
  jsonRes.src_hd=item.itemStruct.src_hd;
  jsonRes.src_sd=item.itemStruct.src_sd;
  jsonRes.src_td=item.itemStruct.src_td;
  arrX.resitems.push(jsonRes);
 };
 
 var jsonResStr=JSON.stringify(arrX);

上面的代碼是先創(chuàng)建arrX的json對象，對對象添加各種屬性、變量等。最后通過stringify轉(zhuǎn)化為字符串，這個獲得的字符串jsonResStr就是一個普通字符串了，可以通過ajax傳遞到服務(wù)器了，值得注意的是，這里如果有中文，那是沒問題的，不會出現(xiàn)亂碼問題。在完成了JOSN封裝之后，開始使用ajax傳遞到PHP頁面

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

php對接收到的json數(shù)據(jù)解析并且寫入到數(shù)據(jù)庫：

if (isset($_POST['jsonResPanel'])) {
  $data=$_POST['jsonResPanel'];
  $arr=(array)(json_decode($data));
  $items=(array)($arr['resitems']);
  $bookid=$arr['bookid'];
  $sql="";
  for ($i=0; $i < count($items); $i++) { 
   $value=(array)($items[$i]);
   $bookid=$value['bookid'];
   $res_id=$value['res_id'];
   $res_name=$value['res_name'];
   $src_origin=$value['src_origin'];
   $src_hd=$value['src_hd'];
   $src_sd=$value['src_sd'];
   $src_td=$value['src_td'];
   $sql.="insert into resourcesheet(bookid,res_id,res_name,src_origin,src_hd,src_sd,src_td)values
   ('{$bookid}','{$res_id}','{$res_name}','{$src_origin}','{$src_hd}','{$src_sd}','{$src_td}');";
  }
  $sqli=new SQLHelper('ugumanage');
  //先刪除bookid下所有資源
  $sqlDelete="delete from resourcesheet where bookid='{$bookid}'";
  $sqli->execute_dml($sqlDelete);
  $sqli->multi_execute_dml($sql);
  $sqli->close_connect();
 }

需要注意的是第三號在拿到j(luò)son字符串之后便使用json_decode函數(shù)解析成對象，這個時候只是一個普通php對象，無法給我提供有效信息，需要將它強制轉(zhuǎn)換為數(shù)組array即可變?yōu)槲覀兪煜さ膒hp數(shù)組，在拿到信息的數(shù)組之后，我們便可以像操作普通php數(shù)組那樣提取json傳遞過來的所有信息了，上面代碼將json的部分信息添加到數(shù)據(jù)庫的一張表里邊，當(dāng)然如果傳遞的json字符串過長，建議使用GZip在客戶端對字符串壓縮之后再傳遞，接收端解壓縮即可。

PHP->JavaScript：

如果客戶端需要查詢數(shù)據(jù)庫的數(shù)據(jù)，必然需要要求服務(wù)器查詢，由php將查詢結(jié)果通過json返回給客戶端。

首先客戶端通過ajax發(fā)送查詢請求給php

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

第二行表示得到了查詢結(jié)果，下面來看看在php端是怎么生成這個結(jié)果并返回的。

if (isset($_REQUEST['loadResPanel'])) {
  $bookid=$_REQUEST['loadResPanel'];
  $sqli=new SQLHelper('ugumanage');
  $arr=array();
  $arrItems=array();
  $arrInfo=array();
  $head=urlencode("http://{$_SERVER['HTTP_HOST']}/cloud/"); 
  $sql0="select *from contentsheet where bookid='{$bookid}'";
  $res0=$sqli->execute_dql($sql0);
  while ($row0=$res0->fetch_assoc()) {
   $catalogid=$row0['catalogid'];
   $bookid=$row0['bookid'];
   $title=urlencode($row0['title']);
  }
  $sql1="select *from resourcesheet where bookid='{$bookid}'";
  $res1=$sqli->execute_dql($sql1);
  while ($row1=$res1->fetch_assoc()) {
   $item=array('bookid'=>$row1["bookid"],'res_id'=>$row1['res_id'],'res_name'=>urlencode($row1["res_name"]),
   'src_origin'=>$row1["src_origin"],'src_hd'=>$row1["src_hd"],'src_sd'=>$row1["src_sd"],'src_td'=>$row1["src_td"]);
   array_push($arrItems,$item);
  }


  $arrInfo['head']=$head;
  $arrInfo['catalogid']=$catalogid;
  $arrInfo['bookid']=$bookid;
  $arrInfo['title']=$title;
  $arr['info']=$arrInfo;
  $arr['items']=$arrItems;
  $json=urldecode(json_encode($arr)) ;
  echo $json;
  $sqli->close_connect();
 }

值得注意的是第七行這種，遇到特殊符號或者中文字符，在php端需要將它們統(tǒng)一轉(zhuǎn)碼，具體轉(zhuǎn)成了什么，我們不用關(guān)心，只需要知道在外面套一個urlencode函數(shù)就可以了。創(chuàng)建json同樣是使用數(shù)組，編制好數(shù)組之后，通過json_encode可以直接將其轉(zhuǎn)化為json字符串。這里在返回給客戶端之前，仍然需要再使用urldecode解碼，這樣傳遞出來的json字符串才不會有亂碼現(xiàn)象。

客戶端接收到j(luò)son字符串后同樣需要對它進行解析成javascript對象。

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

 var jsonObj=JSON.parse(jsonStr);
 var info=jsonObj.info;
 var items=jsonObj.items;

 document.getElementById('textBox').value=info.title;
 for (var i=0; i < items.length; i++) {
   var item=new UploadItemStruct();
  item.id=items[i].res_id;
  item.head=info.head;
  item.name=items[i].res_name;
  // item.type=$(this).attr('type');
  item.src=items[i].src_origin;
  item.src_hd=items[i].src_hd;
  item.src_sd=items[i].src_sd;
  item.src_td=items[i].src_td;
  addCellSubThree(document.getElementById("divPanel"),item); 
 };

注意的是第四行。解析json的關(guān)鍵方法是JSON.parse方法，json字符串變成javascript對象之后，便可以任意提取json傳遞過來的訊息了。

以上這篇javascript和php使用ajax通信傳遞JSON的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論