SpringMVC(5)------异步调用与跨域访问

异步调用

  • 添加Jackson的坐标pom.xml
<!--        json坐标三个-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.0</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.0</version>
        </dependency>

接收异步请求参数的传递

image-20211004202554777

image-20211004202622758

  • jsp代码

    //为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;charset=utf-8"
        });
    });
    
  • java代码

    package com.yy.controller;
    
    
    import com.yy.domain.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    public class AjaxController {
    
    //    @RequestMapping("/ajaxController")
    //    public String ajaxController(){
    //        System.out.println("ajax request is running...");
    //        return "page.jsp";
    //    }
    
    	//普通数据pojo对象
        @RequestMapping("/ajaxController")
        //使用@RequestBody注解,可以将请求体内容封装到指定参数中
        public String ajaxController(@RequestBody String message){
            System.out.println("ajax request is running..."+message);
            return "page.jsp";
        }
    	//json数据
        @RequestMapping("/ajaxPojoToController")
        //如果处理参数是POJO,且页面发送的请求数据格式与POJO中的属性对应,@RequestBody注解可以自动映射对应请求数据到POJO中
        //注意:POJO中的属性如果请求数据中没有,属性值为null,POJO中没有的属性如果请求数据中有,不进行映射
        public String  ajaxPojoToController(@RequestBody User user){
            System.out.println("controller pojo :"+user);
            return "page.jsp";
        }
    	//json数据List
        @RequestMapping("/ajaxListToController")
        //如果处理参数是List集合且封装了POJO,且页面发送的数据是JSON格式的对象数组,数据将自动映射到集合参数中
        public String  ajaxListToController(@RequestBody List<User> userList){
            System.out.println("controller list :"+userList);
            return "page.jsp";
        }
    }
    

异步请求接收响应数据

image-20211004205048079

image-20211004205109135

image-20211004205119460

  • jsp代码

    //为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);//这里弹出的是[object Object]
                alert(data['name']+" ,  "+data['age']);//这里弹出的是Jockme ,  39
            }
        });
    });
    
    //为id="testAjaxReturnJsonList"的组件绑定点击事件
    $("#testAjaxReturnJsonList").click(function(){
        //发送异步调用
        $.ajax({
            type:"POST",
            url:"ajaxReturnJsonList",
            //回调函数
            success:function(data){
                alert(data);//[object Object],[object Object]
                alert(data.length);//2
                alert(data[0]["name"]);//Tom
                alert(data[1]["age"]);//5
            }
        });
    });
    
  • java代码

    package com.yy.controller;
    
    
    import com.yy.domain.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    public class AjaxController {
    
        //使用注解@ResponseBody可以将返回的页面不进行解析,直接返回字符串,该注解可以添加到方法上方或返回值前面
        @RequestMapping("/ajaxReturnString")
    //    @ResponseBody
        //@ResponseBody有两个添加的地方,如该例
        //添加@ResponseBody过后,返回的是page.jsp这个字符串
        //如果没有添加@ResponseBody,返回的是page.jsp这个jsp里面的jsp文件的内容(即html)页面
        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;
        }
    }
    

跨域访问

  • 当通过域名A下的操作访问域名B下的资源时,称为跨域访问

  • 跨域访问时,会出现无法访问的现象

如果A服务器去访问B服务器里面的东西,这种情况就叫做跨域访问

  1. 即不同域名下信息的访问
  2. 两个不同的域:请求协议不同,IP地址不同,端口号不同,只要有一个不同就叫做跨域

同一个服务器,但是域名不同,也叫做跨域访问

跨域访问环境搭建:这样配置过后,就可以使用www.jock.com访问127.0.0.1;配置完过后,通过localhost和www.jock.com进行访问,如此便实现该环境
在这里插入图片描述

image-20211004205109135
image-20211004205119460

  • jsp代码

    //为id="testCross"的组件绑定点击事件
    $("#testCross").click(function(){
        //发送异步调用
        $.ajax({
            type:"POST",
            url:"http://www.jock.com/cross",
            //回调函数
            success:function(data){
                alert("跨域调用信息反馈:"+data['name']+" ,  "+data['age']);//跨域调用信息反馈:Jockme ,  39
            }
        });
    });
    
  • java代码

    package com.yy.controller;
    
    
    import com.yy.domain.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    public class AjaxController {
        @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;
        }
    
    }
    
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

?abc!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值