onsubmit用於郵政編碼文本輸入。 XMLhttprequest：輸入zip，返回城市

Question

我想創建一個小程序，涉及到郵政編碼輸入和使用http://www.zippopotam.us/獲得相關城市。最終，我將解析城市數據並將其存儲爲程序開發時的變量..也許對更具體的區域使用long/lat。

1. 使用下面的代碼，輸入初始郵政編碼後，它的工作按計劃，我看到與預期的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(); 
} 

Answer 1

您正在創建一個跨域安全策略，這意味着來自您的域的文件不允許從另一個域加載數據。

通常情況下，你會做你自己的服務器發出請求，這將查詢zippopotam.us，並將數據返回給您。從客戶角度來看，它使得數據看起來像來自您的服務器，因此允許調用。

或者，對於客戶端唯一的解決方案，檢查http://www.zippopotam.us/是否支持jsonp：http://en.wikipedia.org/wiki/JSONP。還有其他方法（例如，查看您的提供者是否有一些允許來源的標頭）。

請參閱此處瞭解更多信息：https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS