问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
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.3k
    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 })

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