发送异步请求:
<%@page pageEncoding="UTF-8" language="java" contentType="text/html;UTF-8" %><a href="javascript:void(0);" id="testAjax">访问springmvc后台controller</a><br/>
<a href="javascript:void(0);" id="testAjaxPojo">访问springmvc后台controller,传递Json格式POJO</a><br/>
<a href="javascript:void(0);" id="testAjaxList">访问springmvc后台controller,传递Json格式List</a><br/>
<a href="javascript:void(0);" id="testAjaxReturnString">访问springmvc后台controller,返回字符串数据</a><br/>
<a href="javascript:void(0);" id="testAjaxReturnJson">访问springmvc后台controller,返回Json数据</a><br/>
<a href="javascript:void(0);" id="testAjaxReturnJsonList">访问springmvc后台controller,返回Json数组数据</a><br/>
<br/>
<a href="javascript:void(0);" id="testCross">跨域访问</a><br/><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script><script type="text/javascript">$(function () {//为id="testAjax"的组件绑定点击事件$("#testAjax").click(function(){//发送异步调用$.ajax({//请求方式:POST请求type:"POST",//请求的地址url:"ajaxController",//请求参数(也就是请求内容)data:'ajax message',//响应正文类型dataType:"text",//请求正文的MIME类型contentType:"application/text",});});//为id="testAjaxPojo"的组件绑定点击事件$("#testAjaxPojo").click(function(){$.ajax({type:"POST",url:"ajaxPojoToController",data:'{"name":"Jock","age":39}',dataType:"text",contentType:"application/json",});});//为id="testAjaxList"的组件绑定点击事件$("#testAjaxList").click(function(){$.ajax({type:"POST",url:"ajaxListToController",data:'[{"name":"Jock","age":39},{"name":"Jockme","age":40}]',dataType:"text",contentType:"application/json",});});//为id="testAjaxReturnString"的组件绑定点击事件$("#testAjaxReturnString").click(function(){//发送异步调用$.ajax({type:"POST",url:"ajaxReturnString",//回调函数success:function(data){//打印返回结果alert(data);}});});//为id="testAjaxReturnJson"的组件绑定点击事件$("#testAjaxReturnJson").click(function(){//发送异步调用$.ajax({type:"POST",url:"ajaxReturnJson",//回调函数success:function(data){alert(data);alert(data['name']+" , "+data['age']);}});});//为id="testAjaxReturnJsonList"的组件绑定点击事件$("#testAjaxReturnJsonList").click(function(){//发送异步调用$.ajax({type:"POST",url:"ajaxReturnJsonList",//回调函数success:function(data){alert(data);alert(data.length);alert(data[0]["name"]);alert(data[1]["age"]);}});});//为id="testCross"的组件绑定点击事件$("#testCross").click(function(){//发送异步调用$.ajax({type:"POST",url:"http://www.jock.com/cross",//回调函数success:function(data){alert("跨域调用信息反馈:"+data['name']+" , "+data['age']);}});});});
</script>
接收异步请求参数:
- 名称: @RequestBody
- 类型: 形参注解
- 位置:处理器类中的方法形参前方
- 作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
@RequestMapping("/ajaxController")
// 不加这个注解是拿不到的,如果获取不了前端返回的数据,要注意这里。
public String ajaxController(@RequestBody String message){System.out.println(message);return "page.jsp";
}
- 注解添加到Pojo参数前方时,封装的异步提交数据按照Pojo的属性格式进行关系映射
- 注解添加到集合参数前方时,封装的异步提交数据按照集合的存储结构进行关系映射
@RequestMapping("/ajaxPojoToController")
//如果处理参数是POJO,且页面发送的请求数据格式与POJO中的属性对应,@RequestBody注解可以自动映射对应请求数据到POJO中
//注意:POJO中的属性如果请求数据中没有,属性值为null,POJO中没有的属性如果请求数据中有,不进行映射
public String ajaxPojoToController(@RequestBody User user){System.out.println("controller pojo :"+user);return "page.jsp";
}@RequestMapping("/ajaxListToController")
//如果处理参数是List集合且封装了POJO,且页面发送的数据是JSON格式的对象数组,数据将自动映射到集合参数中
public String ajaxListToController(@RequestBody List<User> userList){System.out.println("controller list :"+userList);return "page.jsp";
}
异步请求响应数据:
- 名称: @ResponseBody
- 类型: 方法注解、返回值注解
- 位置:处理类中的方法前方
- 作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
方法返回值为Pojo时,自动封装数据成json对象数据
@RequestMapping("/ajaxReturnJson")
@ResponseBody // 如果不加这个注解会变成在浏览器弹框展示,加上这个注解就是告诉springMVC不要用视图解析,把接收的信息当成字符串解析
public User ajaxReturnJson(){System.out.println("controller return json pojo...");User user = new User();user.setName("Jockme");user.setAge(40);return user;
}
方法返回值为List时,自动封装数据成json对象数组数据
@RequestMapping("/ajaxReturnJsonList")
@ResponseBody
//基于jackon技术,使用@ResponseBody注解可以将返回的保存POJO对象的集合转成json数组格式数据
public List ajaxReturnJsonList(){System.out.println("controller return json list...");User user1 = new User();user1.setName("Tom");user1.setAge(3);User user2 = new User();user2.setName("Jerry");user2.setAge(5);ArrayList al = new ArrayList();al.add(user1);al.add(user2);return al;
}
异步请求-跨域访问:
当通过域名A下的操作访问域名B下的资源时,不同服务间(不同的域)的访问就是称为跨域访问,跨域访问时要加上@CrossOrigin注解,否则会出现无法访问的现象(也就是A服务访问的还是A服务,B服务访问的还是B服务,跨域要做到的是,不同服务访问的资源路径是一样的)
怎么才算两个不同的域,下面三条只要有一个不同就算是跨域
- 请求协议不同
- ip地址不同
- 端口号不同
- 域名不同(两个服务都在同一个服务器上,但是域名不同,互相访问也是跨域)
跨域环境搭建:
为当前主机添加备用域名
- 修改本机的hosts文件
- 格式: ip 域名(
注意本机地址和域名间是有个空格的哈
) - 例:127.0.0.1 www.itzhuzhu.com
动态刷新DNS
- 命令: ipconfig /displaydns
- 命令: ipconfig /flushdns
跨域访问支持:
- 名称: @CrossOrigin
- 类型: 方法注解 、 类注解
- 位置:处理器类中的方法上方 或 类上方
- 作用:设置当前处理器方法/处理器类中所有方法支持跨域访问
@RequestMapping("/cross")
@ResponseBody
//使用@CrossOrigin开启跨域访问
//标注在处理器方法上方表示该方法支持跨域访问
//标注在处理器类上方表示该处理器类中的所有处理器方法均支持跨域访问
@CrossOrigin
public User cross(HttpServletRequest request){System.out.println("controller cross..."+request.getRequestURL());User user = new User();user.setName("Jockme");user.setAge(39);return user;
}