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

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

时间: 2024-10-19 18:50:23

javascript和php使用ajax通信传递JSON的相关文章

使用Javascript Ajax 通信操作JSON数据 [下]

上一篇文章我们获得后台数据库的数据后转换成json格式然后返回到前台,但只是返回的一位数组,这次我们返回二维和三维数组和对象. 前台代码shizhan.html: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>json数据获取</title> 5 <meta charset="utf-8"> 6 <script src='jquery.js'></scr

使用Javascript Ajax 通信操作JSON数据 [上]

以前只是知道json的格式而已,也做过的是从数据库获得数据然后弄成json的格式然后赋给HighCharts生成曲线,先把数据库的数据使用array()函数转换成数组,然后使用json_encode()函数将数组格式转换为json格式,从而再传输给HighCharts中的代码,从而生成曲线. (json_code()和json_encode()的作用是一样的) 今天加强了json_code()函数和json_decode()函数的学习,通过$.GET()来获得后台的数据然后输出到前台. 下面是前

前端学习——使用Ajax方式POST JSON数据包

0.前言 本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰. 为了说明问题,前端和后端较为简单,重点突出AJAX的应用. [前端]--add-post-json.html 图1 add页面 [后端]--add-post-json.php <?php // 返回JSON格式 header('Content-Type:application/jso

ASP.NET Web 前台Ajax传递JSON

Json 作为一种轻量级的数据交换格式,主要用于和服务器之间进行交换数据,其数据格式类似于 键值组合形式的数组. 在Web 中使用Ajax传递Json数据时候,就不得不先提一提Form表单,web前台界面中使用的控件默认是嵌在 form中的,而在form下使用asp:button控件,被HTML编译后默认类型为Submit,如此就先于Ajax一步提交了表单,导致Json数据无法正常传递到后台,合理的解决办法是 给Button 设置 OnClientClick="return false;&quo

从Python传递JSON到JavaScript

OS: Windows 8.1 with update 关键字:Python 3.4,HTML5,JSON,JavaScript 1.LocalServer.py,启动server,打开网页,传递JSON. from threading import Thread import time import webbrowser import http.server import socketserver import json import os port_number = 8000 server

前端Ajax传递Json数据,后端处理两种方式

在这里只讨论在前端通过Ajax远程传输Json数据的,不讨论通过form的形式传递数据 第一种方式: 前端传递过来的数据刚好和我们的bean实体对象属性一致,则可以使用对象的形式接受. 前端写法: 1 $().ready(function(){ 2 var obj = JSON.stringify({'userNo':'121589','processId':'15','processName':'测试审批','description':'这是一个测试'}); 3 alert(obj); 4 5

Jquery JavaScript解析Ajax返回的json数据(转)

最近在用jquery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行. 经过网友指出,这个问题已经有了比较明确的结论,那就是jquery ajax方法的complete方法是不会处理dataType的,所以如果你是在complete里面试图直接用json数据是不可行的,必须先通过eval. $.ajax方法如下: Java代码 $.ajax({ type: “POST”, url: ctxRoot+’FolderAct

Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据)

form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multipart/form-data"> {# 这里必须要请求头格式才能把上传文件的对象传过去 enctype="multipart/form-data"#} 姓名 <input type="text" name="user">

jq ajax传递json对象到服务端及contentType的用法

目录 0.一般情况下,通过键值对的方式将参数传递到服务端 1.ajax 传递复杂json对象到服务端 2.content-Type 对asp.net mvc项目的重要性 0.一般情况下,通过键值对的方式将参数传递到服务端 0.1 客户端代码: $.ajax({ url: 'TestHandler.ashx', type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data