如何使用 JavaScript 和 AJAX 根据邮政编码自动填充城市和州？

问题描述

我正在创建需要输入地址的表单。如果用户首先输入邮政编码，我如何让它根据邮政编码自动填充城市和州？城市会自动填充到文本输入中，状态会从下拉菜单中自动选择。我的代码中列出了每个状态，但对于我的示例，我只包含了一些状态以使其更短。目前我有这个：

<div>
  <fieldset>
     <legend>Golfer 1:</legend>
     <label for="name">Name:</label>
     <input type="text" id="name" name="name"><br>
     <label for="address">Street Address:</label>
     <input type="text" id="address" name="address">
     <label for="city">City:</label>
     <input type="text" id="city" name="city"><br>
     <label for="state">State:</label>
     <select id="state" name="state">
       <option disabled selected value> -- select a state -- </option>
       <option value="Alabama">Alabama</option>
       <option value="Alaska">Alaska</option>
       <option value="Arizona">Arizona</option>
       <option value="Arkansas">Arkansas</option>
     </select>
     <label for="zipcode">Zip Code:</label>
     <input type="text" id="zipcode" name="zipcode"><br>
  </fieldset>
</div>

我有一个 url 可以将邮政编码发送到 zip-code = xxxxx 的位置，该 url 返回 STATE_city,city,city。如何将邮政编码发送到 url，然后让它自动将此数据填充到州输入中，并在当前城市输入中提供带有城市选项的城市下拉列表。

解决方法

您可以使用对 Google Geocode API 的 javascript 调用来实现

window.findAddressFromZip = function(zipcode) {
  var city,state,zip;
  zip = zipcode.value;
  city = '';
  state = '';
  if (zip.length === 5) {
    $.ajax({
      type: 'POST',url: "http://maps.googleapis.com/maps/api/geocode/json?address=" + zip + "?key=XXXXXXXXXXXXXXXXXXXX",success: (function(_this) {
        return function(data) {
          if (data["status"] === "OK") {
            $('input#user_account_attributes_address_attributes_city').val(data["results"][0]["address_components"][1]["long_name"]);
            return $('select#user_account_attributes_address_attributes_state').val(data["results"][0]["address_components"][4]["long_name"]);
          }
        };
      })(this)
    });
  }
};

或者，您是否可以try some other API使用邮政编码从美国邮政局获取数据。