0

我正在尝试创建一个小程序，其中涉及输入邮政编码并使用http://www.zippopotam.us/获取相关城市。最终，我将解析城市数据并将其存储为程序开发的变量。也许对更具体的区域使用 long/lat。

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

1 回答 1

0

您正在执行跨域安全策略，这意味着来自您的域的文件不允许从另一个域加载数据。

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

或者，对于仅限客户端的解决方案，请检查http://www.zippopotam.us/是否支持 jsonp：http ://en.wikipedia.org/wiki/JSONP 。还有其他方法（例如，查看您的提供程序是否有一些允许来源标头）。

阅读本文了解更多信息：https ://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

于 2013-03-04T05:45:13.483 回答