通过 jQuery AJAX 从远程 URL 检索 JSON 数据

Question

我正在使用以下代码从 URL 获取数据。

$.ajax({
    url: 'http://183.77.251.173:90/api/function/getprice.aspx?code=1301&length=3M',
    success: function (data) {
        alert(data.results[0].address_components[0].long_name);
    },
    error: function (jqXHR, exception) {
        alert(jqXHR.status);
    }

但是它会抛出状态代码为0 的错误。我不知道这是什么原因？我也尝试设置crossDomian:true，但仍然抛出同样的错误。

我还将 URL 修改为http://www.google.com，这也返回了0 的错误状态代码。为什么？是什么原因？从远程 URL 获取数据的正确方法是什么？

Answer 1

除非您使用 JSONP 或 CORS，否则您无法发出跨域请求。它们的可用性将取决于您从中请求信息的域的 API。

这是现代浏览器的一项安全功能，称为Same Origin Policy。

Answer 2

查找带有填充（或 JSONP）的 JSON，由于您使用 jQuery，您应该在这里查看：http://api.jquery.com/jQuery.getJSON/

从该网站窃取的示例：

<script>
(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
  .done(function( data ) {
    $.each( data.items, function( i, item ) {
      $( "<img/>" ).attr( "src", item.media.m ).appendTo( "#images" );
      if ( i === 3 ) {
        return false;
      }
    });
  });
})();
</script>

编辑：

自制示例，使用 jquery.jsonp-2.4.0 获得更好的错误响应 (https://github.com/jaubourg/jquery-jsonp/downloads)。但是你也可以使用普通的 jQuery。

在客户端，你需要这样的东西：

$.jsonp({
    "url": target_url+"ping.php?callback=?",
    "success": function(data) {
        // print out data
    },
    "error": function(d,msg) {
        // error
    }
});

目标服务器上的ping.php文件：

<?php
    echo $_GET['callback'] . '(' . "{'response' : 'success'}" . ')';
?>

Answer 3

正如其他人所说，您收到错误 0 是因为该站点无法访问。跨站问题是一个原因。当然，不正确的 URL 也是如此。如果您尝试访问的 URL 确实有效并且与您的站点位于不同的域中，那么是的，您遇到了跨域问题。

JSONP 将是你让它工作的唯一方法，但也有缺点。请查看 SO 上的这篇文章以获得详细说明：

What is JSONP all about?

文章中还有一个指向http://www.json.org/JSONRequest.html 的链接。我还没有尝试过，所以不确定它是否有效。

这应该可以帮助你。

Answer 4

跨域使用$.getJSON()。

$.getJSON('http://183.77.251.173:90/api/function/getprice.aspx?code=1301&length=3M', function(data){
alert(data.results[0].address_components[0].long_name);
});