springmvc-异步调用
SpringMVC-异步调用
发送异步请求(回顾)
<a href="javascript:void(0);" id="testAjax">访问controllera>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js">script>
<script type="text/javascript">
$(function(){
$("#testAjax").click(function(){ // 为 id="testAjax" 的组件绑定点击事件
$.ajax({ // 发送异步调用
type:"POST", // 请求方式： POST 请求
url:"ajaxController", // 请求参数（也就是请求内容）
data:'ajax message', // 请求参数（也就是请求内容）
dataType:"text", // 响应正文类型
contentType:"application/text", // 请求正文的 MIME 类型
});
});
});
script>
发送异步请求
异步请求传参
@RequestBody
形参注解
位置: 处理器类中的方法形参前方
作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
发送异步请求
//为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",
});
});
发送异步请求controller
@RequestMapping("/ajaxController")
//使用@RequestBody注解，可以将请求体内容封装到指定参数中
public String ajaxController(@RequestBody String message){
System.out.println("ajax request is running..."+message);
return "page.jsp";
}
@RequestMapping("/ajaxPojoToController")
//如果处理参数是POJO，且页面发送的请求数据格式与POJO中的属性对应，@RequestBody注解可以自动映射对应请求数据到POJO中
//注意：POJO中的属性如果请求数据中没有，属性值为null，POJO中没有的属性如果请求数据中有，不进行映射
//封装的异步提交数据安装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";
}
异步请求响应
回顾
// 为 id="testAjaxReturnJson" 的组件绑定点击事件
$("#testAjaxReturnJson").click(function(){
$.ajax({
type:"POST",
url:"ajaxReturnJson",
success:function(data){ // 回调函数
alert(data);
}
});
});
异步请求响应
@ResponseBody
方法注解 或 返回值注解
位置: 处理器类中的方法前方
作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
//为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"]);
}
});
});
controller
//使用注解@ResponseBody可以将返回的页面不进行解析，直接返回字符串，该注解可以添加到方法上方或返回值前面
@RequestMapping("/ajaxReturnString")
// @ResponseBody
public @ResponseBody String ajaxReturnString(){
System.out.println("controller return string ...");
return "page.jsp";
}
@RequestMapping("/ajaxReturnJson")
@ResponseBody
//基于jackon技术，使用@ResponseBody注解可以将返回的POJO对象转成json格式数据
public User ajaxReturnJson(){
System.out.println("controller return json pojo...");
User user = new User();
user.setName("Jockme");
user.setAge(39);
return user;
}
@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;
}
POST异步请求获取参数
-
后端（后端接收参数的前面需要加上@RequestBody）
@RequestMapping("/ajaxPojoToController") //如果处理参数是POJO，且页面发送的请求数据格式与POJO中的属性对应，@RequestBody注解可以自动映射对应请求数据到POJO中 //注意：POJO中的属性如果请求数据中没有，属性值为null，POJO中没有的属性如果请求数据中有，不进行映射 public String ajaxPojoToController(@RequestBody User user){ System.out.println("controller pojo :"+user); return "page.jsp"; } -
前端Jquery异步请求
<a href="javascript:void(0);" id="testAjaxPojo">访问controller</a> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> //为id="testAjaxPojo"的组件绑定点击事件 $("#testAjaxPojo").click(function(){ $.ajax({// 发送异步调用 type:"POST",// 请求方式： POST 请求 url:"ajaxPojoToController", // 请求路径 data:'{"name":"Jock","age":39}',请求参数（也就是请求内容） dataType:"text",// 响应正文类型 contentType:"application/json", // 请求正文的 MIME 类型 }); }); -
保存用户信息
-
saveUser,void,User
@RequestMapping("saveUser") @ResponseBody public User saveUser(@RequestBody User user) { System.out.println(user);//改为调用service return user; } -
前端
$.ajax({ type:"POST", url:"saveUser", data:'{"name":"cls","age":39}', dataType:"text", contentType:"application/json", success:function(data){ //打印返回结果 alert(data); } });
-
跨域访问
概念
通过域名A下的操作访问域名B下的资源时 ,称为跨域访问
跨域访问,会出现无法访问的现象
- 协议
- 地址（ip）
- 端口
- 以上其中一个不同就视为跨域
跨域环境搭建
1.为当前主机添加备用域名
修改windows安装目录中的host文件
格式: ip 域名
2.动态刷新DNS
命令:ipconfig /displaydns
命令:ipconfig /flushdns
- 谁导致的跨域问题： 浏览器，后端代码直接网络调用不会出现跨域
- 解决什么问题：多项目之间的相互调用会存在跨域问题
跨域访问支持
@CrossOrigin
类型:方法注解 或 类注解
位置: 处理器类中的方法上方 或 类上方
作用: 设置当前处理器方法 或 处理器类中所有方法支持跨域访问
测试跨域访问:
//为id="testCross"的组件绑定点击事件
$("#testCross").click(function(){
//发送异步调用
$.ajax({
type:"POST",
url:"http://www.jock.com/cross",
//回调函数
success:function(data){
alert("跨域调用信息反馈："+data['name']+" , "+data['age']);
}
});
});
@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;
}
@PathVariable注解
通过 @PathVariable 可以将URL中占位符参数{xxx}绑定到处理器类的方法形参中@PathVariable(“xxx“)
@RequestMapping("user/{id}/{name}")
public ModelAndView user(@PathVariable("id") Long id ,@PathVariable("name") String name){
ModelAndView model= new ModelAndView();
return model;
}