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>