zoukankan      html  css  js  c++  java
  • ajax跨域请求的处理

    跨域的情形有很多种,网上有人给出了一份表格,

    表格中标识为”不允许”通信的情况都属于跨域。实际网络服务中需要跨域的情况确实存在,于是开发者们提供了一种解决方案,就是使用jsonp格式进行数据交互,它不是标准的json格式,而是形如”callback(json)”的格式,这样在使用ajax跨域请求的时候就需要对后台的返回值做一下处理,不能返回json数据了。

    不跨域时的ajax请求一般是:

    $.ajax({

                  type: 'POST',               

                    url: "getData.do", 

                    dataType:'json',

                    data:{id:id },

                    async:true, 

                   success: function (data) {                        

                     $.messager.alert('OOOOPS','请求成功!','info');                                                         

                    },             

                   error: function (XMLHttpRequest, textStatus, errorThrown) {        

                          //请求失败处理函数    

                        // alert(XMLHttpRequest.status);//404

                       // alert(XMLHttpRequest.readyState);//4

                       // alert(textStatus);         //error

                     $.messager.alert('TIPS',textStatus,'info');

                    }

                  }); 

    如果是跨域的请求,这个ajax就要改写成这样:

    $.ajax({

                  type: 'POST',               

                   url: "getData.do", 

                    dataType:'jsonp',

                    jsonp:'callback',

                   data:{id:id },

                    async:true, 

                   success: function (data) {                        

                    $.messager.alert('OOOOPS','请求成功!','info');                                                        

                    },             

                   error: function (XMLHttpRequest, textStatus, errorThrown) {              

                          //请求失败处理函数    

                        // alert(XMLHttpRequest.status);//404

                       // alert(XMLHttpRequest.readyState);//4

                       // alert(textStatus);         //error

                     $.messager.alert('TIPS',textStatus,'info');

                    }

                  });      

    那么后台方法的接口也要做相应的修改,因为多了个参数jsonp啊!

     @RequestMapping("getData")

     @ResponseBody

    public String queryData(HttpServletRequest request,String id) {   

    String callback = request.getParameter("callback");//接收ajax传递的jsonp参数

    //中间数据处理的代码段

    String res = callback+"({'sucess':'true'})";

                 return res;   //返回值给ajax回调函数

    }

  • 相关阅读:
    Mybatis plus强大的条件构造器QueryWrapper条件构造器基础方法解释
    代码一键生成
    报错:error setting certificate verify locations: CAfile: D:/Git/anz/Git/mingw64/ssl/certs/ca-bundle.crt CApath: none
    safari怎么设置开发者模式,调出审查元素
    react antd Tabs组件如何修改默认样式-友好的解决方法
    css filter属性滤镜变灰
    yarn的安装和常用命令
    react-app-rewired start 启动失败报错解决方法
    react路由5到底要怎么使用(基础向)
    react中img引入本地图片的2种方式
  • 原文地址:https://www.cnblogs.com/tulpen/p/8093571.html
Copyright © 2011-2022 走看看