关于Ajax JsonP跨域请求成功无法进入Success方法 解决方案

2018-10-20 22:58:49 XXM

最近写功能一直踩坑,今天下午一直在调试前端的一些代码,调试到2018-10-20 22:35:30 终于好了,踩坑过程3小时....

因为是本地调试,写了个伪数据,来尝试通过ajax动态更新,因为是本地,只好通过jsonp来实现跨域请求 代码如下:

$.ajax({
           type : "GET",
           url : "http://l.haxibiao.com/test.json",
           dataType : "jsonp",       
            success:function(result){  //成功的回调函数                
                console.log('准备更新')
                console.log(result)
                console.log('更新完成');

            },
            error: function (e,textStatus) {
                console.log(e);
                console.log("图表请求数据失败!");
                console.log(textStatus);
                myChart.hideLoading();
            }
        });

发现请求成功了,但是并没有走到success方法中,却走到了error当中,中途两个小时各种调试,甚至怀疑是电脑的问题...

WX20181020-224518@2x.png

终于在baidu中翻到了一篇关于jsonp的帖子.

原因是jsonp跨域访问, 会注册callback, 生产一个随机的callback,正确的jsonp格式应该是 callback({"id" : "1","name" : "李大师"});

所以我们需要在前台指定回调函数

jsonpCallbacksuccessCallback

后台在对数据返回的时候需要拼接成以下结构

"successCallback("+Json+")"

例如:
successCallback({"id" : "1","name" : "李大师"});

正确写法如下:

$.ajax({
           type : "GET",
           url : "http://l.haxibiao.com/test.json",
           dataType : "jsonp",        
           jsonpCallback:"successCallback",
            success:function(result){  //成功的回调函数                
                console.log('准备更新')
                console.log(result)
                console.log('更新完成');

            },
            error: function (e,textStatus) {
                console.log(e);
                console.log("图表请求数据失败!");
                console.log(textStatus);
                myChart.hideLoading();
            }
        });

这样才可以正确的拿到数据.

WX20181020-225709@2x.png

还有一个坑就是jsonp并不支持同步调用 所以设置async:false 没有任何效果...

总结: 使用jsonp跨域访问时, 一定需要注意callback,或者直接定义一个callback,例如这样:jsonpCallback:"successCallback"

后台返回的json数据结构也需要按照"successCallback("+Json+")"这样的结构拼接起来.


日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容