javascript、jquery、およびhtmlを使用してwundergroundの場所を検索しようとしています

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使用する必要がありますなぜあなたはまだ理解していない場合は、

は、これら2つのリンクを開くと、あなたはそれらの違いが何であるかが表示されます。

without cb paramater

with cb paramater

Answer 2

あなたはセキュリティ上の理由（the same origin policyを参照）のためにJavaScriptを使用してリモートサイトからデータを取得することはできません。

回避策には、CORS（制限付きブラウザサポート、そのサービスでサポートされていない）、JSON-P（当サービスでは明らかにサポートされていない）、独自のサーバーでのプロキシの使用が含まれます。