javascript - .getJSON() 和 .ajax() 均不适用于 REST API 调用

Question

有人可以解释一下如何使用 jQuery/Javascript 进行 REST 调用吗？我尝试使用 .getJSON() 和 .ajax()，但都没有帮助我。

这是 REST URL:

http://ws1.airnowgateway.org/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=94954&date=2010-01-15&format=json&key=API_KEY

代码:

$.getJSON('http://ws1.airnowgateway.org/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode='+zip+'&format=json&key=**<KEY HERE>**',

    function(data)
    {

        alert(data.AQI);
    }

);

$.ajax({
    url: 'http://ws1.airnowgateway.org/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode',
    type: 'GET',
    data: 'zipcode='+zip+'&format=json&key=**<KEY HERE>**',
    success: function() { alert('get completed'); }
});

Answer 1

有几个问题。首先，您需要在查询字符串末尾添加 &callback=? 以允许跨域。

$.getJSON('http://ws1.airnowgateway.org/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=94954&format=json&key=B868EA39-1D92-412A-96DE-DCF5ED30236D&callback=?',

  function(data)
  {
    alert(data.forecast[0]);
  }

);

然后您将收到 Uncaught SyntaxError: Unexpected token : 错误。这是因为您需要 json 数据，但服务器上的 header 正在发送 text/html - 而不是 application/json。当你run this fiddle时看看控制台，您会看到错误。

因此，您无法从跨域获取数据，因为您必须使用 jsonp - 这要求正确发送 header 。

如果这是您的 api，那么您只需发送正确的 header ，否则，您需要与那里的开发人员联系并要求他们修复它。

<小时/>

或者

如果上述选项都不起作用，您始终可以创建一个代理脚本，该脚本将为您获取 json feed 的内容并回显它。这是 PHP 中的一个:

<?php
// myproxy.php

header('Content-type: application/json');
$zip = $_GET['zip'];
$results = file_get_contents('http://ws1.airnowgateway.org/GatewayWebServiceREST/Gateway.svc/forecastbyzipcode?zipcode=' . $zip . '&format=json&key=B868EA39-1D92-412A-96DE-DCF5ED30236D');

echo $results;
?>

然后，您只需将 $.getJSON 指向服务器上的此脚本即可:

$.getJSON('/myproxy.php?zip='+zip,

  function(data)
  {
    var mydata = jQuery.parseJSON(data);
    alert(mydata.forecast[0]);
  }

);