Ajax - 使用Ajax传递Json数据

JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。在使用Ajax时,我们经常会使用JSON来传递数据。本小节,将重点学习JSON对象、JSON数组以及如何在Ajax中传递JSON数据。

JSON简介

(1)定义JSON对象和JSON数组
①JSON对象

a.定义JSON对象

语法:在这里插入图片描述
在JavaScript中,JSON对象是用大括号括起来,包含了多组属性。每个属性名和属性值之间用冒号隔开,多个属性之间用逗号隔开,并且属性名必须是字符串,如下:
在这里插入图片描述

b.使用JSON对象

可以通过“JSON对象名.key”获取对应的value值,如下:
在这里插入图片描述

json.jsp

运行结果如图所示。
在这里插入图片描述

                                         图 运行结果

②JSON数组

a.定义JSON数组

语法:
在这里插入图片描述

在JavaScript中,JSON数组是用中括号括起来,包含了多个JSON对象,多个对象之间用逗号隔开,如下:
在这里插入图片描述

b.使用JSON数组

可以通过“JSON对象名[索引].key”获取对应的value值,如下:
在这里插入图片描述

运行结果如图所示。
在这里插入图片描述

                                         图 运行结果

AJAX使用JSON传递数据
使用jQuery实现AJAX时,客户端可以使用$.getJSON()向服务器端发送JSON格式的数据,服务器端也可以向客户端返回JSON格式的数据。

语法:
在这里插入图片描述

示例:

客户端:json.jsp
在这里插入图片描述

服务器端:MobileJSONServlet.java
在这里插入图片描述

客户端使用$.getJSON向服务器端MobileJSONServlet发送JSON数据{mobileNum: $mobile},服务器端接收到mobileNum的值后再以JSON对象的格式返回给客户端,如{“msg”:“绑定成功!”}。最后,客户端再解析服务器端返回的JSON值,如result.msg。

上述的服务器端代码MobileJSONServlet中,是通过字符串拼接的形式向客户端返回了JSON形式的结果,如{“msg”:“绑定成功!”}。除此之外,我们还可以在服务器端中使用JSONObject类来产生JSON对象,并返回给客户端,如下:

客户端:json.jsp
在这里插入图片描述

服务器端:在使用JSONObject之前,需要给项目导入以下JAR文件,如表所示
在这里插入图片描述

JSONObjectServlet.java
在这里插入图片描述

客户端通过$.getJSON()向服务器端JSONObjectServlet发送请求,并传递JSON格式的数据{name:stuName,age:stuAge}。服务器端将客户端的数据接收后封装到Student对象之中,之后再将Student对象加入到JSONObject对象之中,并把JSONObject对象返回给客户端。最后,客户端通过回调函数的参数result接收到JSONObject对象,并通过eval(result.stu)将JSONObject对象之中的stu转义成JSON字符串格式,再用student.name等拿到需要使用的值。


作者:颜群
来源:微信公众号
原文:https://mp.weixin.qq.com/s?src=11&timestamp=1606178969&ver=2725&signature=NKaUlIHJALN91fNdNcZR6oZFPQ5fx6dVqV4gwmLTp8pp7Ut5Df87qeYtp9Ou7E5bmMv0r7ecppc-JiYLxrJWEZmu7KcDho64pZoTri2XP*jCfsxbS0v6C2-xHEQ2&new=1
版权声明:本文为博主原创文章,转载请附上博文链接!

  • 3
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值