SpringMVC异步调用&跨域访问支持

异步调用

发送异步请求

<a href="javascript:void(0);" id="testAjax">访问controller</a> 
<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
• 类型:形参注解
• 位置:处理器类中的方法形参前方
• 作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
• 范例:

@RequestMapping("/ajaxController")
public String ajaxController(@RequestBody String message){
     System.out.println(message);
     return "page.jsp"; 
}

• 注解添加到POJO参数前方时,封装的异步提交数据按照POJO的属性格式进行关系映射

@RequestMapping("/ajaxPojoToController")
public String ajaxPojoToController(@RequestBody User user){
     System.out.println("controller pojo :"+user);
     return "page.jsp"; 
}

• 注解添加到集合参数前方时,封装的异步提交数据按照集合的储存结果进行关系映射

@RequestMapping("/ajaxListToController")
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
• 类型:方法注解,返回值注解
• 位置:处理器类中的方法前方
• 作用:将异步提交数据组织成标准请求参数格式,并赋值给形参
• 范例:

@RequestMapping("/ajaxReturnString")
@ResponseBody
public String ajaxReturnString(){
      System.out.println("controller return string ...");
      return "page.jsp"; 
}

• 方法返回值为Pojo时,自动封装数据成Json对象数据
  
• 方法返回值为List时,自动封装数据成Json对象数组数据
  

跨域访问

• 当通过域名A下的操作访问域名B下的资源时,称为跨域访问
• 跨域访问时,会出现无法访问的现象
  

跨域访问支持

• 名称:@CrossOrigin
• 类型:方法注解,类注解
• 位置:处理器类中的方法上方 或 类上方
• 作用:设置当前处理器方法/处理器类中所有方法支持跨域访问
• 范例:

@RequestMapping("/ajaxReturnJson")
@ResponseBody
@CrossOrigin
public User ajaxReturnJson(){
     User user = new User();
     user.setName("Jockme");
     user.setAge(40);
     return user;
}