javascript和php使用ajax通信传递JSON的实例

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对象的封装：

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);

上面的代码是先创建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数据解析并且写入到数据库：

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();
 }

需要注意的是第三号在拿到json字符串之后便使用json_decode函数解析成对象，这个时候只是一个普通php对象，无法给我提供有效信息，需要将它强制转换为数组array即可变为我们熟悉的php数组，在拿到信息的数组之后，我们便可以像操作普通php数组那样提取json传递过来的所有信息了，上面代码将json的部分信息添加到数据库的一张表里边，当然如果传递的json字符串过长，建议使用gzip在客户端对字符串压缩之后再传递，接收端解压缩即可。

php->javascript：

如果客户端需要查询数据库的数据，必然需要要求服务器查询，由php将查询结果通过json返回给客户端。

首先客户端通过ajax发送查询请求给php

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

var jsonstr=request.responsetext; 

第二行表示得到了查询结果，下面来看看在php端是怎么生成这个结果并返回的。

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端需要将它们统一转码，具体转成了什么，我们不用关心，只需要知道在外面套一个urlencode函数就可以了。创建json同样是使用数组，编制好数组之后，通过json_encode可以直接将其转化为json字符串。这里在返回给客户端之前，仍然需要再使用urldecode解码，这样传递出来的json字符串才不会有乱码现象。

客户端接收到json字符串后同样需要对它进行解析成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的关键方法是json.parse方法，json字符串变成javascript对象之后，便可以任意提取json传递过来的讯息了。

以上这篇javascript和php使用ajax通信传递json的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。