Javascript onsubmit用于zipcode文本输入。XMLhttprequest:输入zip，返回城市

我正在尝试创建一个小程序，其中包括获取zipcode输入并使用获取相关的城市信息。最终，我将解析城市数据，并在程序开发时作为变量存储。。可能对更具体的区域使用long/lat

当使用下面的代码时，在输入初始zipcode后，它按计划工作，我看到一个带有预期JSON结果的警报。在初始zip输入之后，一旦zip被更改并再次提交，它就不起作用了。更新后的zip会反映在URL中，但它会从文本输入字段中消失，并且不会执行城市功能。它需要第二次提交才能工作。为什么会发生这种情况？我该如何应对

www.zippopotam.us/是一个很好的方法，还是有更好的选择

功能城市（）{
var zip=$（'#loc'）.val（）；
var client=new XMLHttpRequest（）；
client.open（“GET”http://api.zippopotam.us/us/“+zip，正确）；
client.onreadystatechange=函数（）{
if（client.readyState==4）{
警报（client.responseText）；
};
};
client.send（）；
}

您正在使用跨域安全策略，这意味着来自您域的文件不允许从其他域加载数据

通常，您会向自己的服务器发出请求，该服务器将查询zippopotam.us并将数据返回给您。从客户端的角度来看，它使数据看起来像来自您的服务器，因此允许调用

或者，对于仅客户端的解决方案，检查是否支持jsonp:。还有其他方法（例如，查看您的提供商是否有一些allow origin标头）

---

阅读此文章了解更多信息：

谢谢您的回答。仔细看，我看到来自目标服务器的http响应显示访问控制允许源代码：*。我理解*意味着任何域都可以通过跨站点的方式访问资源。我现在可以在firefox中使用，但不能在safari中使用。不确定停止safari工作与浏览器有什么不同。

<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();
}