suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

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

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

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

js代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<code class="lang-javascript">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;

}

</code>

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

求指教，多谢。

PHP中文网PHP中文网2912 Tage vor482

Antworte allen(4)Ich werde antworten

  • 迷茫

    迷茫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 名，如：

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <code class="lang-javascript">jQuery.ajax({

        url: 'http://api.XXX.com/603/arealist_jsonp.txt',

        dataType: 'jsonp',

        jsonpCallback: 'CallBack',

        success: function(data) {

            // do what you want

        }

    })

    </code>

    Antwort
    0
  • 巴扎黑

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

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

    1

    2

    3

    4

    5

    6

    7

    <code class="lang-php">$jsondata = '{

    "issingle": false,

    "bgpicwidth": 360,

    。。。

    })';

    echo $_GET['callback'].'('.$jsondata.')';

    </code>

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

    1

    2

    3

    4

    5

    <code class="lang-javascript">success: function(data) {

        // 使用你定义的回调内容

        CallBack(data);

    }

    </code>

    这时，CallBack拿到的是js object

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

    Antwort
    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.

    Antwort
    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');

    希望对你有帮助。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <code class="lang-javascript"><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>

    </code>

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

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

    Antwort
    0
  • StornierenAntwort