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>

相关推荐