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方法来获取数据
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 3 "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>test_JSON</title> 8 9 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" > 10 </script> 11 12 <script type="text/javascript"> 13 function testJson(){ 14 // 获取输入的用户名和密码 15 var userid=$("#uid").val(); 16 var username = $("#username").val(); 17 var password = $("#password").val(); 18 $.ajax({ 19 url : "${pageContext.request.contextPath }/testJson", 20 type : "post", 21 // data表示发送的数据 22 data :JSON.stringify({userid:userid,username:username,password:password}), 23 // 定义发送请求的数据格式为JSON字符串 24 contentType : "application/json;charset=UTF-8", 25 //定义回调响应的数据格式为JSON字符串,该属性可以省略 26 dataType : "json", 27 //成功响应的结果 28 success : function(data){ 29 if(data != null){ 30 alert("您输入的用户序号为:"+data.userid+" 名为:"+data.username+" 密码为："+data.password); 31 } 32 } 33 }); 34 } 35 </script> 36 </head> 37 38 <body> 39 <form> 40 序号：<input type="text" name="userid" id="uid"><br /> 41 用户名：<input type="text" name="username" id="username"><br /> 42 密码：<input type="password" name="password" id="password"><br /> 43 <input type="button" value="测试" onclick="testJson()"/> 44 </form> 45 </body> 46 </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>
