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>