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