Onsubmit用于邮政编码文本输入.XMLhttprequest:输入zip，返回城市

Question

我试图创建一个小程序，其中涉及采取邮政编码输入和使用http://www.zippopotam.us/获得相关城市。最终，我将解析城市数据和存储变量作为程序开发。对于更具体的区域，可以使用长/迟。

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

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。，并将数据返回给您。从客户机的角度来看，它使数据看起来像是来自您的服务器，因此允许调用。

或者，对于仅客户端解决方案，检查http://www.zippopotam.us/是否支持jsonp: http://en.wikipedia.org/wiki/JSONP。还有其他方法(例如，看看你的提供商是否有一些allow-origin头)。

阅读更多信息:https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS