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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
小程序开发基础之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使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP简单遍历对象示例
2016/09/28 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Angular2整合其他插件的方法
2018/01/20 Javascript
window下eclipse安装python插件教程
2017/04/24 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
毕业生自荐书
2013/12/18 职场文书
母婴店促销方案
2014/03/05 职场文书
产品质量承诺范本
2014/03/31 职场文书
父母寄语大全
2014/04/12 职场文书
普通党员对照检查材料
2014/09/24 职场文书
交通事故委托书范本
2014/09/28 职场文书