11.1JSON数据交互
11.1.1 JSON概述
JSON（JavaScript Object Notation, JS 对象标记）是一种轻量级的数据交换格式。与 XML 一样，JSON 也是基于纯文本的数据格式。它有对象结构和数组结构两种数据结构。
1）对象结构
对象结构以“{”开始、以“}”结束，中间部分由 0 个或多个以英文“，”分隔的 key/value 对构成，key 和 value 之间以英文“：”分隔。对象结构的语法结构如下：
{
key1:value1,
key2:value2,
...
}其中，key 必须为 String 类型，value 可以是 String、Number、Object、Array 等数据类型。例如，一个 person 对象包含姓名、密码、年龄等信息，使用 JSON 的表示形式如下：
{
"pname":"张三",
"password":"123456",
"page":40
}2）数组结构
数组结构以“[”开始、以“]”结束，中间部分由 0 个或多个以英文“，”分隔的值的列表组成。数组结构的语法结构如下：
{
value1,
value2,
...
}上述两种（对象、数组）数据结构也可以分别组合构成更加复杂的数据结构。例如，一个 student 对象包含 sno、sname、hobby 和 college 对象，其 JSON 的表示形式如下：
{
"sno":"201802228888",
"sname":"张三",
"hobby":["篮球","足球"]，
"college":{
"cname":"清华大学",
"city":"北京"
}
}11.1.2 JSON数据转换
为实现浏览器与控制器类之间的 JSON 数据交互，Spring MVC 提供了 MappingJackson2HttpMessageConverter 实现类默认处理 JSON 格式请求响应。该实现类利用 Jackson 开源包读写 JSON 数据，将 Java 对象转换为 JSON 对象和 XML 文档，同时也可以将 JSON 对象和 XML 文档转换为 Java 对象。
在使用注解开发时需要用到两个重要的 JSON 格式转换注解，分别是 @RequestBody 和 @ResponseBody。
- @RequestBody：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上。
- @ResponseBody：用于直接返回return 对象，该注解应用在方法上。
11.1.3 样例展示
修改springmvc配置文件，配置静态资源的访问映射
<!-- 配置注解驱动 -->
<mvc:annotation-driven />
<!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
<mvc:resources location="/js/" mapping="/js/**" />编写前端测试JSON数据交互的页面
<head>
<title>测试JSON交互</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
function testJson(){
// 获取输入的用户名和密码
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url : "${pageContext.request.contextPath }/testJson",
type : "post",
// data表示发送的数据
data :JSON.stringify({username:username,password:password}),
// 定义发送请求的数据格式为JSON字符串
contentType : "application/json;charset=UTF-8",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data){
if(data != null){
alert("您输入的用户名为："+data.username+
"密码为："+data.password);
}
}
});
}
</script>
</head>
<body>
<form>
用户名：<input type="text" name="username" id="username"><br />
密 码：
<input type="password" name="password" id="password"><br />
<input type="button" value="测试JSON交互" onclick=" testJson()" />
</form>
</body>编写控制器类
@Controller
public class UserController {
@RequestMapping("/testJson")
@ResponseBody
public User testJson(@RequestBody User user){
System.out.print(user);
return user;
}
}测试访问
11.2RESTfu数据交互
11.2.1 RESTfu概述
可以理解为一种软件架构风格或者设计风格。
简单来说，就是把请求参数变成请求路径
原先的 ：…/queryItem?id=1
变换后：…/item/1
11.2.2 RESTfu数据转换
编写控制器类请求方法
/**
*接收RESTful风格的请求,其接收方式为GET
*/
@RequestMapping(value="/user/{id}",method=RequestMethod.GET)
@ResponseBody
public User selectUser(@PathVariable("id") String id){
//查看数据接收
System.out.println("id="+id);
User user=new User();
//模拟根据id查询出到用户对象数据
if(id.equals("1234")){
user.setUsername("tom");
}
//返回JSON格式的数据
return user;
}value="/user/{id}"表示匹配以/user/{id}结尾的请求,id为动态参数
method=RequestMethod.GET表示请求方式
@PathVariable(“id”)将请求URL中的变量映射到方法的形参上。
然后编写前端界面
<head>
<title>RESTful测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
</script>
<script type="text/javascript">
function search(){
// 获取输入的查询编号
var id = $("#number").val();
$.ajax({
url : "${pageContext.request.contextPath }/user/"+id,
type : "GET",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data){
if(data.username != null){
alert("您查询的用户是："+data.username);
}else{
alert("没有找到id为:"+id+"的用户！");
}
}
});
}
</script>
</head>
<body>
<form>
编号：<input type="text" name="number" id="number">
<input type="button" value="搜索" onclick="search()" />
</form>
</body>测试运行结果如下：
