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


Posted in Javascript onAugust 21, 2018

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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
Element Input组件分析小结
Oct 11 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
小程序开发基础之view视图容器
Aug 21 #Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 #Javascript
Vue插件打包与发布的方法示例
Aug 20 #Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 #Javascript
You might like
php 操作符与控制结构
2012/03/07 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
民政局个人整改措施
2014/09/24 职场文书
房产协议书范本
2014/10/18 职场文书
投资申请报告
2015/05/19 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
母亲节主题班会
2015/08/14 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS