onsubmit для ввода текста в zipcode. XMLhttprequest: ввод zip, return city

Question

Я пытаюсь создать небольшую программу, которая включает в себя получение ввода zipcode и получение связанного города с использованием http://www.zippopotam.us/. В конце концов я проанализирую данные города и сохраню переменную, как только программа будет разработана. Возможно, используйте длинный/лат для более конкретных регионов.

1. При использовании ниже код, после того, как первоначальный почтовый индекс введен, он работает, как и планировалось, и я вижу предупреждение с предполагаемым результатом JSON. После первоначального ввода 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

Вы ударяете перекрестную политику безопасности домена, что означает, что файл, поступающий от вашего домена не разрешен загружать данные из другого домена.

Как правило, вы отправляете запрос на ваш 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