使用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‘></script>
 7     <script type="text/javascript">
 8     $("document").ready(function() {
 9         var url="shizhan.php";
10         var data={"do":"first"};
11
12         $.getJSON(url,data,function(res){
13             $("#username").val(res.username);
14             $("#password").val(res.password);
15         });
16
17         var data={"do":"second"};
18         $.getJSON(url,data,function(res) {
19             $("#members").val(res.third.members.username);
20         });
21
22         var data={"do":"third"};
23         $.getJSON(url,data,function(res){
24             $("#address").val(res.address[1].username);
25         });
26
27     });
28     </script>
29 </head>
30 <body>
31     <h2>一位数组json数据显示</h2>
32     <input type="text" name="username" id="username" /><br/>
33     <input type="password" name="password" id="password">
34
35     <h2>二位数组json数据显示</h2>
36     <textarea id="members"></textarea>
37
38     <h2>三位数组json数据显示</h2>
39     <textarea id="address"></textarea>
40 </body>
41 </html>

这里我们用$.getJSON(url,data,callback)来获得我们从url处返回的json格式的数据,注意,$.getJSON()中的JSON必须大写。

并且这时我们传递给后台的参数不把它放在url的末尾,而是直接放在新定义的data变量中。所以后台程序获取参数时不再使用$_GET[]了,而是使用$_REQUEST[].

还有一点值得提醒的是,在将返回得到的json格式的数据时,如果后台的二位数组中的第一位是[‘1‘],则我们在前台赋给变量中的数据的格式应为上述代码中的

$("#address").val(res.address[1].username); ,而不是 $("#address").val(res.address.1.username); ,而如果后台的二维或者是三维数组的第一位是[‘third‘]等英文时,则可用上述代码中的 $("#members").val(res.third.members.username); .

  后台代码:

 1 <?php
 2
 3 $do=$_REQUEST[‘do‘];
 4
 5 $member[‘username‘]=‘慕课网‘;
 6 $member[‘password‘]=‘mukewang‘;
 7
 8 $members[‘1‘][‘username‘]=‘张三‘;
 9 $members[‘1‘][‘password‘]=‘zhangsan‘;
10 $members[‘2‘][‘username‘]=‘李四‘;
11 $members[‘2‘][‘password‘]=‘lisi‘;
12 $members[‘2‘][‘address‘]=‘朝阳区‘;
13
14 $members[‘third‘][‘members‘][‘username‘]=‘我是第三个用户名‘;
15
16 class addressClass{
17     public $address = array();
18
19     public function setAddress($array) {
20         $this->address=$array;
21     }
22
23     public function getAddrss() {
24         return $this->address;
25     }
26 }
27
28 $addressObj = new addressClass();
29
30 $addressObj->setAddress($members);
31
32 switch($do) {
33     case ‘first‘ : echo json_encode($member);break;
34
35     case ‘second‘: echo json_encode($members);break;
36
37     case ‘third‘ : echo json_encode($addressObj);break;
38 }

后台代码中我们使用json_encode()函数来将一位数组,二维数组,三位数组和对象转换为json格式的数据。

时间: 2024-08-14 09:23:52

使用Javascript Ajax 通信操作JSON数据 [下]的相关文章

使用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

Java操作JSON数据(2)--Gson操作JSON数据

Gson是Google公司发布的一个开发源码的Java库,可用于将Java对象转换为JSON字符串,也可用于将JSON字符串转换为对应的Java对象.本介绍下Gson的基本使用方法,包括序列化和反序列化:文中所使用到的软件版本:Java 1.8.0_191.Gson 2.8.6. 1.引入依赖 <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactI

详谈 Jquery Ajax 异步处理Json数据.

详谈 Jquery Ajax 异步处理Json数据.

spring mvc接收ajax提交的JSON数据,并反序列化为对象

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo

jquery通过ajax方法获取json数据不执行success回调

问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号!

java操作Json数据

最近要使用java来操作Json数据,虽然Json用过几次,但一直没有好好总结,趁这次来总结一下java操作Json数据.Java操作Json有很多工具包,地址为http://www.json.org/,可以自己上去挑选. 这里我使用第一个org.json,最新源码地址为:https://github.com/douglascrockford/JSON-java,可以自己去下载,我也会在附件上传.下载源码后放进工程即可,包名为org.json 我们要操作的Json数据如下: {"total&qu

jquery通过ajax方法获取json数据不执行success

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success

javascript和php使用ajax通信传递JSON

JS和PHP直接通信常用ajax完成,以实现js上UI的动态变化.通信使用JSON或者XML传递数据.下面详细描述两者直接JSON字符串的传递. 下面案例是要传递这样的json数据: { "bookid": "558a6be36c72a" , "resitems": [ { "res_id": "558a6bff6bd55", "res_name": "IMG_8421.jpg