SpringMVC——异步调用与跨域访问

异步调用

  • 添加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>

接收异步请求参数的传递

SpringMVC——异步调用与跨域访问

SpringMVC——异步调用与跨域访问

  • 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"
    });
});

异步请求接收响应数据

SpringMVC——异步调用与跨域访问

SpringMVC——异步调用与跨域访问

SpringMVC——异步调用与跨域访问

  • 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
        }
    });
});

跨域访问

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

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

跨域访问环境搭建:这样配置过后,就可以使用www.jock.com访问127.0.0.1;配置完过后,通过localhost和www.jock.com进行访问,如此便实现该环境
SpringMVC——异步调用与跨域访问

SpringMVC——异步调用与跨域访问
SpringMVC——异步调用与跨域访问

上一篇:15-10000 前端JavaScript 3种书写位置 JS初体验


下一篇:vue中@click与它的事件修饰符@click.stop、@click.prevent