Kullanıcı şehir ve eyalet girdiğinde zip kodunu otomatik olarak doldurmak için zippopotam.us özelliğini kullanma

Question

Belirli bir posta kodunun şehirini ve durumunu otomatik olarak doldurmak için zippopotam API'sini kullanabileceğinizi biliyorum, ancak bir yol bulmaya çalışıyorum Bir şehir ve eyalet verilirse, zip kodunu otomatik olarak doldurmak için API'yi kullanmak.

Aşağıdaki ajax aramasına bakarsanız, posta kodu değerini kullanarak istekte olduğumu görebilirsiniz, ancak posta kodu dışında bir parametreyi iletirseniz boş bir JSON bloğu döndürür.

Sadece merak ettim, herkes bu şekilde zippopotam yanıtlarını kullanma veya manipüle etme deneyimine sahip mi?

Henüz bulunamamış başka bir olası basit çözüm yok mu?

<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

Çoğu şehirler birden fazla posta kodu var, yani doldur oto için şehir/eyalet daha spesifik olduğu için tek posta kodu gerekir. Ancak, zippopotam.us does provide an API for getting ZIP codes based on city/state numaralı telefondan

. URL'ler http://api.zippopotam.us/country/state/city biçimindedir.

İşte nasıl kullanılacağı hakkında bir örnek. Örneğin girmeyi deneyin. İl = "Peoria" ve Devlet = "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>

Bu gerçekten harika