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)values17 ('{$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传递过来的讯息了。