私は、郵便番号の入力を取り、http://www.zippopotam.us/を使用して関連する都市を取得する小さなプログラムを作成しようとしています。最終的には、都市データを解析し、プログラムが開発されるにつれて変数として保存します。おそらく、より特定の地域には経度/緯度を使用します。
以下のコードを使用すると、最初の郵便番号が入力された後、計画どおりに機能し、意図した JSON 結果を含むアラートが表示されます。最初のzip入力後、zipを変更して再度送信すると、機能しません。更新された zip は URL に反映されますが、テキスト入力フィールドからは消え、都市機能は実行されません。それが機能するには、2 回目の送信が必要です。なぜこれが起こっているのですか、どうすれば回避できますか?
www.zippopotam.us/ はこれを行う良い方法ですか、それともより良いオプションはありますか?
.
<div id="location">
<form onsubmit="city()">
<input type="text" name="loc" id="loc" />
</form>
</div>
function city(){
var zip = $('#loc').val();
var client = new XMLHttpRequest();
client.open("GET", "http://api.zippopotam.us/us/"+zip, true);
client.onreadystatechange = function() {
if(client.readyState == 4) {
alert(client.responseText);
};
};
client.send();
}