尝试使用javascript，jquery和html搜索wunderground位置 [英] Trying to search wunderground locations with javascript, jquery, and html

问题描述

下面的代码不起作用。尝试搜索天气位置。

 < input type =textid =query/>< button>搜寻< /按钮>< br /> 
< div id =results> 
 
< / div> 
 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jstype =text / javascript><<<< ; /脚本> 
< 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 ）{
 $ .each（json.results，function（i，location）{
 $（＃results）。append（'< p> + location.name +'< / p> ;'）; 
}）; 
}）; 
}）; 
}）; 
< / script> 
  

供参考我对编码非常缺乏经验（从其他网站复制的脚本）

解决方案

如果您想进行跨域请求，您必须使用 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参数用于 wunderground API中的JSONP回调函数，正如您可以在文档中看到的那样。如果你仍然不明白为什么你需要使用jsonp回调函数，那么

打开这两个链接，你会看到它们之间有什么不同。

无cb参数 $ b

with cb paramater

The code below doesn't work. Trying to search weather locations. When I search nothing happens.

<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 I am very inexperienced at coding (copied script from another website)

解决方案

If you want to make cross domain request, you have to that with JSONP, and you should append callback function for JSONP request as mentioned here in wunderground.com, try this.

$(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>');
            });
        });
    });
});​

UPDATE:

At first you should learn what is JSONP.

cb parameter is for JSONP callback function in wunderground API as you can see here in documentation.

If you still doesn't understand why you need to use jsonp callback function,

open these two links, and you will see what is the differences between them.

without cb paramater

with cb paramater

这篇关于尝试使用javascript，jquery和html搜索wunderground位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！