问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

尝试使用jsonp 解决ajax 跨域解决

头像
shiziwen
    334174647

    在服务器端，有一个txt文件，里面保存的是json格式的数据，如下所示：
    {
    "issingle": false,
    "bgpicwidth": 360,
    。。。
    }

    使用ajax获取文件的时候，会报错。

    尝试使用jsonp解决问题，做出的改动如下：
    服务端的txt文件修改如下：
    CallBack({
    "issingle": false,
    "bgpicwidth": 360,
    。。。
    })

    js代码如下：

    function CallBack(data){
    alert(data.issingle);
}

var url = 'http://api.XXX.com/603/arealist_jsonp.txt?callback=CallBack';
function area_test_jsonp(){
    $.ajax({
        url: url,
        dataType: 'jsonp',
        processData: false,
        type: 'get',
        success: function(data) {
            alert('ok');
            alert(data);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('error');
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    });
    return false;
}

    结果虽然可以通过CallBack获取数据，但还是会报错，执行area_test_jsonp中error的部分，XMLHttpRequest.status为200，XMLHttpRequest.readyState为4，textStatus为parsererror。

    求指教，多谢。

    ajaxjsonjavascriptjquery
    阅读 36.4k
    4 个回答
    得票最新
    头像
    c君不在
      229113
      1. url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的
      2. 默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery180099599698651582_1393992892572 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。
      3. 如果响应内容中是写死了 callback 名的话，那么可以对 jQuery 的 jsonp 指定 callback 名，如：
      jQuery.ajax({
    url: 'http://api.XXX.com/603/arealist_jsonp.txt',
    dataType: 'jsonp',
    jsonpCallback: 'CallBack',
    success: function(data) {
        // do what you want
    }
})
      头像
      lazyboy
        1.5k115

        用jquery+jsonp的话，服务端要使用动态语言（例如php）获取请求的callback参数获取回调函数的名称，然后返回结果，例如php的

        $jsondata = '{
"issingle": false,
"bgpicwidth": 360,
。。。
})';
echo $_GET['callback'].'('.$jsondata.')';

        也就是说让jquery完成整个解析的过程，然后你在

        success: function(data) {
    // 使用你定义的回调内容
    CallBack(data);
}

        这时，CallBack拿到的是js object

        或者你可以用jQuery.getScript的方式调用你服务端的静态脚本内容，这时CallBack拿到的是js string，然后你自己解析

        头像
        依云
          25k62862

          jQuery.ajax 不是这么用的吧，见文档：

          "jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

          头像
          不二
            191

            返回XMLHttpRequest.status是200， 又报parsererror,肯定是返回数据的格式问题或者服务器没有正确指定Content-type

            1.如果你的接口返回的是一个JS回调函数，那么，它应该是header('Content-type: application/javascript');

            2.或者，如果你的接口返回的是一个JSON字符串，应该指定header('Content-type: application/json');

            希望对你有帮助。

            <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>ajax调用示例</title>


    <script type="text/javascript" src="lib/jquery/jquery.min.1.10.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url: 'ajax_roots.json',
            dataType: 'jsonp',
            jsonpCallback:"datas",
            success: function (data) {
             console.log(data);
            }
        });
    })
    </script>
</head>
<body>

</body>
</html>

            我这样的测试是可行的.ajax_roots.json里面对应内容是

            datas({ "id":"sd","text" : "Root 1", "children" : true })

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏