SpringMVC(四)——JSON数据交互与CRUD
1.什么是JSON？
一种轻量级的[纯文本]数据交换格式，相对于XML来说，解析速度更快，占用空间更小，因为XML需要用标签来描述信息。
对象结构以{}围起来，数组结构以[]围起来，中间都用[,]分开，可以混合在一起形成数据结构，例如
{
"id":10086
"name":"守林鸟"
"hobby":["乒乓","羽毛","骑行"]
"address":{
"country":"中国"
"city":"广州"
}
"job":null
"single":true
}对象结构解析方式：对象.key；数组结构解析方式：for循环
Java对象转换JSON：Bean和map->JSON对象、List->JSON数组；
2.SpringMVC如何处理JSON？
(1)导入SpringMVC默认相关包：jackson-annotation、jackson-core、jackson-databind
(2)在springmvc-config.xml开启mvc注解驱动<mvc:annotation-driven/>，作用是自动注册RequestMappingHandlerMapping 和 RequestMappingHandlerAdapter；再配置静态资源的访问映射，<mvc:resources location="/js/" mapping="/js/**" />，表示此配置文件的文件不被前端控制器拦截
(3)在处理AJAX请求的方法上加上注解@ResponseBody
(4)将要转换为JSON且响应到客户端的数据，直接作为该方法的返回值返回
(5)如果前端传送JSON字符串的数据给后端，请求方法里用@RequestBody修饰参数。不同于@RequestParam()可以有多个参数，@RequestBody最多只能有1个。
(6)要交互的页面中，引入jquery-1.11.3.min.jsp文件，再写一个ajax方法来获取数据
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test_JSON</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" >
</script>
<script type="text/javascript">
function testJson(){
// 获取输入的用户名和密码
var userid=$("#uid").val();
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url : "${pageContext.request.contextPath }/testJson",
type : "post",
// data表示发送的数据
data :JSON.stringify({userid:userid,username:username,password:password}),
// 定义发送请求的数据格式为JSON字符串
contentType : "application/json;charset=UTF-8",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data){
if(data != null){
alert("您输入的用户序号为:"+data.userid+" 名为:"+data.username+" 密码为："+data.password);
}
}
});
}
</script>
</head>
<body>
<form>
序号：<input type="text" name="userid" id="uid"><br />
用户名：<input type="text" name="username" id="username"><br />
密码：<input type="password" name="password" id="password"><br />
<input type="button" value="测试" onclick="testJson()"/>
</form>
</body>
</html>前10行是写死的；testJson()方法结合POJO类设计；15-17行的左边是POJO类的属性名，不可以改，右边${}里对应的是40-42行的<input>的id属性值；19行是设置请求路径对应请求方法的RequestMapping注解路径；22行不要乱改；30行data对应的是15-17的变量名。28-31行表示Json数据不为空就跳出提示框，43行的onclick属性值表示点击后执行testJson()方法。
在控制器类里写方法处理这个请求，接收Json传来的数据
@RequestMapping(value="/testJson")
@ResponseBody
public User testJson(@RequestBody User user) {
System.out.println(user);
return user;
}3.什么是AJAX？
(1)全称：Asynchronous JavaScript And XML，即异步JavaScript和XML
(2)是几种技术的融合
- XHTML和CSS的基于标准的表示技术
- DOM进行动态显示和交互
- XML和XSLT进行数据交换和处理
- XMLHttpRequest进行异步数据检索
- Javascript将以上技术融合在一起
(3)简言之
客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术。传统的开发技术中，每当用户向服务器发送请求，哪怕有一点点更新都要刷新整个页面，造成后果是降低性能和使得用户操作页面中断。用了AJAX技术之后，实现【局部刷新】。
4.RESTful风格的CRUD
RESTful风格就是把请求参数变成请求路径的一种风格，简洁。
以前：localhost:8080/MCV_03/user?userid=1001&name=admin
现在：localhost:8080/MCV_03/user/1001/admin
例如一个查询例子，以userid作为请求路径，请求方法处理请求时，接收userid参数，处理完之后，再以josn的格式返回给jsp页面，成功响应的话再做出处理。
@RequestMapping(value="/user/{userid}",method=RequestMethod.GET)
@ResponseBody
public User selectUser(@PathVariable("userid") Integer userid) {
System.out.println("id="+userid);
User user=new User();
user.setUserid(userid);
if(user.getUserid()==10086) {
user.setUsername("守林鸟");
user.setPassword("shouliniao");
}
System.out.println(user);
return user;
}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test_JSON</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" >
</script>
<script type="text/javascript">
function search(){
var userid=$("#userid").val();
alert("hello userid="+userid);
$.ajax({
url : "${pageContext.request.contextPath }/user/"+userid,
type : "get",
data :JSON.stringify({userid:userid}),// data表示发送的数据
contentType : "application/json;charset=UTF-8",// 定义发送请求的数据格式为JSON字符串
dataType : "json",//定义回调响应的数据格式为JSON字符串,该属性可以省略
//成功响应的结果
success : function(data){
if(data.username != null){
alert("您查询的用户是："+data.username);
}else{
alert("不存在id为"+id+"的用户!");
}
}
});
}
</script>
</head>
<body>
<form>
序号：<input type="text" name="userid" id="userid"><br />
<input type="button" value="search" onclick="search()" />
</form>
</body>
</html> 相关推荐
@RequestBody注解实现接收http请求的json数据，将json数据转换为java对象进行绑定。加上@ResponseBody注解，就不会走视图解析器，不会返回页面，目前返回的json数据。