尝试使用 javascript、jquery 和 html 搜索 wunderground 位置

Posted 2023-03-03

【中文标题】尝试使用 javascript、jquery 和 html 搜索 wunderground 位置

【英文标题】：Trying to search wunderground locations with javascript, jquery, and html

【发布时间】：2012-05-18 03:14:24

【问题描述】：

下面的代码不起作用。试图搜索天气位置。当我搜索时，什么也没有发生。

<input type="text" id="query" /><button>search</button><br />
<div id="results">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
var url='http://autocomplete.wunderground.com/aq?format=JSON&query=';
var query;
    $('button').click(function()
        query=$("#query").val();
        $.getJSON(url+query,function(json)
            $.each(json.results,function(i,location)
               $("#results").append('<p>'+location.name+'</p>');
            );
        );
    );
);
</script>

仅供参考，我对编码非常缺乏经验（从另一个网站复制脚本）

【问题讨论】：

autocomplete.wunderground.com 是否是提供您网页的同一站点的域？

你从哪里得到这个 sn-p？

帕斯，没有。巴兹梅加，webhole.net/2009/11/28/how-to-read-json-with-javascript

【参考方案1】：

如果要进行跨域请求，则必须使用JSONP，并且应为JSONP请求附加回调函数，如here in wunderground.com所述，试试这个。

$(document).ready(function() 
    var url = 'http://autocomplete.wunderground.com/aq?format=JSON&query=';
    var query;
    $('button').click(function() 
        query = $("#query").val();
        $.getJSON(url + query + '&cb=callbackfunc', function(json) 
            $.each(json.results, function(i, location) 
                $("#results").append('<p>' + location.name + '</p>');
            );
        );
    );
);​

更新：

首先你应该了解JSONP是什么。

cb参数用于wunderground API as you can see here in documentation中的JSONP回调函数。

如果你还是不明白为什么需要使用jsonp回调函数，

打开这两个链接，你会发现它们有什么区别。

without cb paramater

with cb paramater

【讨论】：

对不起，编码不好，&cb=的值应该是多少？

@ocanal，非常感谢上面的信息，[不带cd，带cb]的链接真的是一样的，请问有什么区别吗？

@shireefkhatab 是的，只有一个区别，当你使用回调参数时，json 是用mycallbackfunc 包裹的。这意味着当 jsonp 请求完成时调用函数。如果您的页面中有一个 mycallbackfunc，它将使用 json 参数调用。 jquery 处理 jsonp 请求，因此您无需担心。

你能指点一下cb会是什么样子吗？

@shireefkhatab，这是一个简单的纯 javascript jsonp 请求，jsfiddle.net/j8h6jomb/7

【参考方案2】：

出于安全原因，您不能使用 JavaScript 从远程站点提取数据（请参阅the same origin policy）。

解决方法包括 CORS（有限的浏览器支持，该服务不支持）、JSON-P（该服务显然不支持）以及在您自己的服务器上使用代理。