ホームページ  >  に質問  >  本文

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

在服务器端,有一个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。

求指教,多谢。

PHP中文网PHP中文网2748日前435

全員に返信(4)返信します

  • 迷茫

    迷茫2017-04-10 13:14:58

    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
        }
    })
    

    返事
    0
  • 巴扎黑

    巴扎黑2017-04-10 13:14:58

    用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,然后你自己解析

    返事
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 13:14:58

    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.

    返事
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 13:14:58

    返回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 })

    返事
    0
  • キャンセル返事