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

【问题标题】：How do I auto-populate city and state based on zip-code with JavaScript and AJAX?如何使用 JavaScript 和 AJAX 根据邮政编码自动填充城市和州？
【发布时间】：2021-06-10 12:16:23
【问题描述】：

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

<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，然后让它自动将此数据填充到州输入中，并在当前城市输入中使用城市选项提供城市下拉列表。

【问题讨论】：

欢迎来到 Stack Overflow！恐怕这太宽泛了，无法在这里进行有意义的回答。至少您将需要一些数据源或服务来为您提供这些信息。然后，您需要编写代码，使用 zipcode 值从该数据源获取此信息，并使用结果填充其他元素。如果计划是在 JavaScript 中执行此操作，那么您需要开始编写一些 JavaScript 代码。如果您在尝试中遇到特定问题，例如错误或意外结果，我们可以提供帮助。

标签： javascript html jquery zipcode auto-populate

【解决方案1】：

您可以使用对 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 使用邮政编码从美国邮政局获取数据。

【讨论】：