尝试搜索使用JavaScript,jQuery的wunderground位置和html(Trying

2019-06-24 06:39发布

下面的代码无法正常工作。 尝试搜索天气位置。 当我搜索没有任何反应。

<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>

FYI我很稚嫩,编码(复制脚本从其他网站)

Answer 1:

如果你想跨域请求,你必须与JSONP ,你应该追加只字未提。JSONP请求的回调函数在这里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参数是在JSONP回调函数wunderground API,你可以看到在这里的文档 。

如果您还有不明白为什么你需要使用JSONP回调函数,

打开这两个环节上,你会看到什么是它们之间的差异。

没有CB paramater

与CB paramater



Answer 2:

你不能拉从使用JavaScript出于安全原因(见远程站点的数据同源策略 )。

变通涉及CORS(有限的浏览器的支持,而不是由服务支持),JSON-P(没有明显的由该服务支持),并使用自己的服务器上的代理。



文章来源: Trying to search wunderground locations with javascript, jquery, and html