Пытаясь найти места в wunderground с javascript, jquery и html

Question

Код ниже не работает. Попытка поиска местоположения погоды. Когда я ничего не ищу, ничего не происходит.

<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 как упомянуто 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>'); 
      }); 
     }); 
    }); 
});​ 

UPDATE:

Сначала вы должны узнать, что JSONP.

cb параметр предназначен для функции обратного вызова JSONP в wunderground API as you can see here in documentation.

Если вы до сих пор не понимаю, почему вы должны использовать JSONP функцию обратного вызова,

открыть эти две ссылки, и вы увидите, что различия между ними.

without cb paramater

with cb paramater

Answer 2

Вы не можете извлекать данные из удаленных объектов с помощью JavaScript по соображениям безопасности (см the same origin policy).

Работает вокруг CORS (ограниченная поддержка браузера, не поддерживаемая этой службой), JSON-P (явно не поддерживается этой службой) и с использованием прокси-сервера на вашем собственном сервере.