ajax解决跨域问题

通过jsonp,主要代码如下

function getMarkingStatistics(pageNum,pageSize){
        $('#stuDetailMarking').empty();
        $.ajax({
            url: 'xxxxxxxx/listNumberPage',
            type: 'get',
            dataType:"jsonp",
            jsonpCallback: "callback",
            data: {pageNum : pageNum, pageSize : pageSize},
            success:function(res){
               console.log(res)
            },
            error:function(e){
               console.log('接口出现异常');
            }
        });
        
    }            

涉及知识点

1.jsonp、jsonpCallback  jsonp跨域时可以自定义的两个参数

2. jsonp: 回掉函数名的参数名,默认callback,服务端通过它来获取到回掉函数名

3. jsonpCallback: 回掉函数名,默认jquery自动生成

4. 指定jsonpCallback时可以将回掉函数写在ajax外面做其他操作,不指定时不能这样做,只能在success里做操作
一般jquery跨域用到的两个方法为:$.ajax 和$.getJSON
  

JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback,可以通过设置$.ajax()的jsonp参数。

 

其实jquery跨域的原理是通过外链 <script>  来实现的,然后在通过回调函数加上回调函数的参数来实现真正的跨域

 

Jquery 在每次跨域发送请求时都会有callback这个参数,其实这个参数的值就是回调函数名称,所以,服务器端在发送json数据时,应该把这个参数放到前面,这个参数的值往往是随机生成的,如:jsonp1294734708682,同时也可以通过 $.ajax 方法设置 jsonpcallback 方法的名称。

 

原文地址:https://www.cnblogs.com/lvxisha/p/11658577.html