javascript - 如果用户输入城市和州，则使用 zippopotam.us 自动填充邮政编码

Question

我知道您可以使用 zippopotam API 自动填充给定邮政编码的城市和州，但我正在尝试找到一种方法来使用 API 自动填充城市和州的邮政编码给出。

如果您查看下面的 ajax 调用，您可以看到我正在使用邮政编码值发出请求，但是如果您传入邮政编码以外的参数，它会返回一个空的 JSON block 。

我很好奇，有没有人有以这种方式使用或操纵 zippopotam 响应的经验？

如果没有，我可能还没有找到另一种可能的简单解决方案吗？

  <script>
    $(function() {

      // OnKeyDown Function
      $("#zip").keyup(function() {
        var zip_in = $(this);
        var zip_box = $('#zipbox');

      if ((zip_in.val().length == 5) )
        {
          // Make HTTP Request
          $.ajax({
            url: "http://api.zippopotam.us/us/" + zip_in.val(),
            cache: false,
            dataType: "json",
            type: "GET",
            success: function(result, success) {
              // Make the city and state boxes visible
              // US Zip Code Records Officially Map to only 1 Primary Location
              places = result['places'][0];
              $("#city").val(places['place name']);
              $("#state").val(places['state']);
              zip_box.addClass('success').removeClass('error');
            },
            error: function(result, success) {
              zip_box.removeClass('success').addClass('error');
            }
          });
        }
  });
    });

  </script>

<fieldset>
        <legend>US Address Autocompletion</legend>
        <br/>
        <div>
          <div id="zipbox" class="control-group">
            <label for="zip">Zip</label>
            <input type="text" class='' pattern="[0-9]*" name="zip" id="zip" placeholder="Type your ZIP code"/>
          </div>
        </div>
        <div>
          <div id="citybox" class="control-group" >
            <label for="city">City</label>
            <input type="text" name="city" id="city" placeholder="" />
          </div>
          <div id="statebox" class="control-group">
            <label for="state">State</label>
            <input type="text" name="state" id="state" placeholder="" />
          </div>
        </div>
      </fieldset>

Answer 1

大多数城市都有不止一个邮政编码，因此您需要比城市/州更具体才能自动填充单个邮政编码。

然而，zippopotam.us does provide an API for getting ZIP codes based on city/state .

URL 的格式为 http://api.zippopotam.us/country/state/city。

这是一个如何使用它的例子。尝试输入例如城市 = "Peoria"和州 = "IL"

function getZips() {
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  var client = new XMLHttpRequest();
  client.open("GET", "http://api.zippopotam.us/us/" + state + "/" + city, true);
  client.onreadystatechange = function() {
    if (client.readyState == 4) {
      document.getElementById("result").innerHTML = 
        JSON.stringify(JSON.parse(client.responseText), null, 4);
    };
  };
  client.send();
  return false;
}

<form>
  City:<br>
  <input type="text" id="city"><br>
  State (postal abbr.):<br>
  <input type="text" id="state"><br>
</form>
<br>
<button onclick="getZips()">Submit</button>
<hr>
<h3>Results:</h3>
<pre id="result"></pre>