Question

我正在测试这个从URL中检索天气数据的脚本。但出于某种原因，我没有收到回复。我启用了跨站点。有人可以指出问题吗？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  $.ajax({
      type:"GET",
      url:"http://api.openweathermap.org/data/2.5/weather?q=London", 
      headers: { "Accept": "application/json; odata=verbose" },
      crossDomain:true, 
      success:function(result){
           $("#div1").html(result);
      }});
    });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

Answer 1

这是chrome dev控制台中的错误：

XMLHttpRequest无法加载http://api.openweathermap.org/data/2.5/weather?q=London。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost.com”访问。

您如何说已启用跨网站？您正在查询openweathermap服务器，而您不是来自openweathermap ...跨站点启用不仅仅是在ajax中设置标头。服务器需要启用其servlet（或左右）来响应任何域的ajax请求。只有这样我们的ajax调用才能从他们那里获取信息。

Answer 2

<强> Soultion1

如果您的服务器上有php，请在与您的页面相同的域中创建一个名为weather.php的文件。

<?php
echo file_get_contents('http://api.openweathermap.org/data/2.5/weather?q='.$_GET['q']);
?>

并使用您的功能

调用它

url:"weather.php?q=London",

注意：缓慢但真实的ajax

<强> Soultion2

如果openweathermap.org支持回调，你可以使用jsonp

注意：使用<srcip></script>标记填充页面。

<强> Soultion3

使用nodejs proxy

注意：快速＆amp;真正的ajax

<强> Soultion4

使用yql查询。

注意：最快＆amp;真正的ajax

如果您需要更多详细信息，请询问

修改

<强> Solution5

使用php传递内容的快速方法

<?php function w($ch,$chunk){ echo $chunk; ob_flush(); flush(); return strlen($chunk); }; header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *'); $ch=curl_init(); curl_setopt($ch,CURLOPT_URL,$_GET['url']); curl_setopt($ch,CURLOPT_BINARYTRANSFER,1); curl_setopt($ch,CURLOPT_WRITEFUNCTION,w); curl_exec($ch); curl_close($ch); ?>

注意：快于file_get_contents＆amp;真正的ajax

删除

header('Content-Type: application/json'); header('Access-Control-Allow-Origin: *');

部分它甚至更快。

<强> EDIT3

代理对于直接总是一个坏主意，因为你总是2次读取数据。

直接行动

ask-＆GT;读 - ＆GT;显示

代理行动

ask-＆gt;（php / node ask） - ＆gt;（php / node read） - ＆gt;（php / node display） - ＆gt; read-＆gt; display

但在您的情况下，没有其他方法可以直接获取数据。

我根据普通主机将yql标记为最快。

来自openweathermap等重要网站的大部分数据可能已经缓存在雅虎服务器上，而且他们的带宽在全球范围内非常高（并且允许使用crossorigin）。

所以如果你有一个慢主机需要从php或nodejs＆amp;读取openweathermap的数据然后输出带宽有限，比雅虎的服务器慢99％。

nodejs比php快，因为如果你创建了一个好的专用代理脚本，你就可以将数据直接存储在系统内存中。在内存中缓存数据比我知道的任何其他内容都要快。比起它读取静态文件甚至更快。

关键是主机输出请求的速度。

Answer 3

您需要将ajax调用中的dataType设置为“jsonp”。看看这个jsFiddle。我从SO post找到答案（基本上）。

$("button").click(function(){
   $.ajax({
       type:"GET",
       url:"http://api.openweathermap.org/data/2.5/weather?q=London",
       dataType : "jsonp",
       success:function(result){
           console.log(result);
            $("#div1").html(result['name']);
       },
       error: function(xhr, status, error) {
           console.log(status);
       }
     });
});

为了更多地介绍为什么需要这样做：

这基本上是一种绕过浏览器和跨站点保护的方法（根据我的理解 - 它看起来像浏览器的可疑行为）。如今，服务器所有者可以允许跨站点原始请求（CORS），但如果服务器所有者（本例中为openweathermap）没有，您仍然可以通过jsonp请求数据（有关详细信息，请参阅此维基百科条目：en.wikipedia.org / wiki / JSONP）

Answer 4

试试这个你忘记了用于跨域请求的 JSONP ：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $.ajax({
                    type: "GET",
                    dataType: "jsonp",
                    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
                    crossDomain: true,
                    success: function(result) {
                        console.log(result);
                        $("#div1").html(result.clouds.all);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
    <button>Get External Content</button>
</body>
</html>

Answer 5

您忘记了dataType：ajax请求中的“jsonp”属性。

JSON数据未被返回 - JQuery AJAX

5 个答案: