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 函数都能取得到数据,就看你想用哪个方法了。

  • 相关阅读:
    如何通过命令行窗口查看sqlite数据库文件
    eclipse自动补全的设置
    文本装饰
    注释和特殊符号
    文本装饰
    网页背景
    通过ArcGIS Server admin 查看和删除已注册的 Web Adaptor
    通过 ArcGIS Server Manager 查看已安装的 Web Adaptor
    通过 ArcGIS Server Manager 验证 DataStore
    Windows上安装ArcGIS Enterprise——以 Windows Server 2012 R2上安装 ArcGIS 10.8为例
  • 原文地址:https://www.cnblogs.com/feipengting/p/9210322.html
Copyright © 2011-2022 走看看