zoukankan      html  css  js  c++  java
  • Jquery 跨域请求JSON数据问题

    制作网站时,我们有时候为了方便快捷会调用别人写好的API接口,或者是调用一些免费的API接口获得JSON数据。比如天气,农历,网站备案信息查询等。

    但是,这些API接口都是别人自己服务器上的,我们要调用就得涉及到一个跨越问题。在我们请求的时候会出现错误。

    下面是我AJAX请求获得的数据错误信息:"Uncaught SyntaxError: Unexpected token :"

    这个是数据也请求到了,但是还是报错,那是因为

    请求到数据是一个纯Json格式的话,是不能用Jsonp方式调用的,
    支持Jsonp方式的url返回的一定是js脚本,一般是一句函数调用,
    请注意第二种方法中报的错是callback=,=号后面的就是你得到的,

    callback是客户端页面定义的函数名,JSONP方式会在返回的
    Javascript代码里面调用这个函数,JSON数据是当做参数传入方法的
    而不是直接返回一个json。
    这个地址不支持jsonp,请求来的数据是json,浏览器要把当做Javascript
    来解析,遇到 ":" 就报错了。
    如果这个地址支持JSONP,应该返回Javascript代码,在代码里面调用
    callback函数才对。

    下面以获取API接口的服务器时间为例:

    <html>
    <head>
    <title>获取API接口中的时间跨域获得</title>
    <meta charset="UTF-8">
    <!--跨域访问json数据在URL参数中加入&jsoncallback=?
    type:请求类型,GET 或 POST,默认为 GET,
    async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
    url:发送请求的地址(跨域请求时应为绝对地址);
    dataType:指定服务器返回的数据类型;
    jsonpCallback:自定义JSONP回调函数名称;
    success:请求成功后回调函数;
    error:请求失败时调用此方法.
    -->
    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $.ajax({url:"http://api.k780.com:88/?app=life.time&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
        tpye:"post",
        async:false,
        dataType:"jsonp", // 返回的数据类型,设置为JSONP方式
        jsonp:"successCallback", //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
        jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success: function(status){
            console.log(status.result.datetime_1);
            $("#registerTime").text(status.result.datetime_2);
        }
    });
    function message(date){console.log(date.result.datetime_2)}
    </script>
    </head>
    <body>
    <div id="registerTime"></div>
    </body>
    </html>

    我请求JSON遇到的据错误信息:"Uncaught SyntaxError: Unexpected token :" 

    解决方案是在URL请求地址中加入一个参数&jsoncallback=?,这样就不会出现请求的数据不是JSON报错了。

    自定义的jsonp回调函数jsonpCallback:"message",message函数和 success 函数都能取得到数据,就看你想用哪个方法了。

  • 相关阅读:
    读书笔记之:数据结构,算法与应用(3)
    C++中的虚函数继承与虚继承
    读书笔记之:Effective STL
    C++虚函数及虚函数表解析
    类中的常量, const对象和成员函数
    读书笔记之:Boost程序库完全开发指南(Ch14)
    读书笔记之:C++探秘——68讲贯通C++
    读书笔记之:Boost程序库完全开发指南(ch516)
    配置java的环境变量
    查询并杀死死锁
  • 原文地址:https://www.cnblogs.com/feipengting/p/9210322.html
Copyright © 2011-2022 走看看