【愚公系列】2023年04月 Java教学课程 139-Spring MVC框架的前后端数据交互

<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(){
        //发送异步调用
        $.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"]);
           }
        });
    });
});
</script>

@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中没有的属性如果请求数据中有，不进行映射
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可以将返回的页面不进行解析，直接返回字符串，该注解可以添加到方法上方或返回值前面
@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;
}

@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;
}