Javascript 未返回JSON数据-JQuery AJAX_Javascript_Jquery_Ajax_Json

Javascript 未返回JSON数据-JQuery AJAX

javascript jquery ajax json

Javascript 未返回JSON数据-JQuery AJAX,javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我正在测试这个从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(){

我正在测试这个从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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“http://api.openweathermap.org/data/2.5/weather?q=London", 
标题：{“Accept”：“application/json；odata=verbose”}，
跨域：是的，
成功：功能（结果）{
$（“#div1”）.html（结果）；
}});
});
});
让jQuery AJAX更改此文本
获取外部内容

这是chrome开发控制台中的错误：

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”

你怎么能说你已经启用了跨站点？您正在查询openweathermap服务器，而您不是来自openweathermap。。。在ajax中，跨站点启用不仅仅是设置标题。服务器需要使其servlet（大约）能够响应任何域的ajax请求。只有这样，我们的ajax调用才能从他们那里获得信息。

这是chrome开发控制台中的错误：

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”

你怎么能说你已经启用了跨站点？您正在查询openweathermap服务器，而您不是来自openweathermap。。。在ajax中，跨站点启用不仅仅是设置标题。服务器需要使其servlet（大约）能够响应任何域的ajax请求。只有这样，我们的ajax调用才能从他们那里获取信息。

试试这个你忘了放置用于跨域请求的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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
url:“http://api.openweathermap.org/data/2.5/weather?q=London",
跨域：是的，
成功：功能（结果）{
控制台日志（结果）；
$（“#div1”）.html（result.clouds.all）；
}
});
});
});
让jQuery AJAX更改此文本
获取外部内容

试试这个你忘了放置用于跨域请求的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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
url:“http://api.openweathermap.org/data/2.5/weather?q=London",
跨域：是的，
成功：功能（结果）{
控制台日志（结果）；
$（“#div1”）.html（result.clouds.all）；
}
});
});
});
让jQuery AJAX更改此文本
获取外部内容

Soultion1

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

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

注意：缓慢但真实的ajax

Soultion2

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

注意：用

标记填充页面

Soultion3

使用nodejs代理

注意：快速和真实的ajax

Soultion4

使用yql查询

注意：最快和真正的ajax

如果你需要更多的细节，尽管问

编辑

解决方案5

使用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);
?>

第二，速度更快

EDIT3

代理与直接相比总是一个坏主意，因为您总是读取数据2次

直接作用

询问->阅读->显示

代理诉讼

ask->（php/node ask）->（php/node read）->（php/node display）->read->display

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

我根据平均主机将yql标记为最快的

来自openweathermap等重要网站的大部分数据可能已经缓存在yahoo服务器上，它们的带宽在全球范围内非常高（并且允许交叉源）

因此，如果您的主机运行速度较慢，需要使用php或nodejs从openweathermap读取数据，那么在带宽有限的情况下，输出速度比雅虎服务器慢99%

nodejs比php快，因为如果您创建了一个好的专用代理脚本，那么您可以将数据直接存储在系统内存中。在内存中缓存数据比我所知道的任何东西都要快，可能比读取静态文件还要快

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