根据邮政编码自动填充州和城市答案

【问题标题】：Autofilling state and city based on zip code根据邮政编码自动填充州和城市
【发布时间】：2014-03-21 16:24:50
【问题描述】：

我是 Web 开发的新手，我在为我们的业务构建的注册表单上遇到了问题。我正在使用本指南：http://css-tricks.com/using-ziptastic/。这是我第一次使用 AJAX 和 JSON，我只是无法在输入邮政编码后立即让城市和州自动填充。任何解决方案/建议/替代方案将不胜感激。我设置了一个基本的 jsfiddle 来测试所有内容：http://jsfiddle.net/7VtHc/

HTML：

<p>Zip Code: <input type="text" id="zip" /></p>
<p>City: <input type="text" id="city" /></p>
<p>State: <input type="text" id="state" /></p>

jQuery 等

$("#zip").keyup(function() {
var el = $(this);

if ((el.val().length == 5) && (is_int(el.val()))) {
    $.ajax({
    url: "http://zip.elevenbasetwo.com",
    cache: false,
    dataType: "json",
    type: "GET",
    data: "zip=" + el.val(),
    success: function(result, success)

    $("#city").val(result.city);
    $("#state").val(result.state);
    });
}
});

【问题讨论】：

你确定你正在达到你的成功功能吗？

标签： javascript jquery ajax json forms

【解决方案1】：

这应该适合你。 http://jsfiddle.net/7VtHc/5/
我会补充一点，JavaScript 中的=== 将检查类型是否相同。 See Here.
无需创建is_int() 函数。

$(document).ready(function() {
    $("#zip").keyup(function() {
        var el = $(this);

        if (el.val().length === 5) {
            $.ajax({
                url: "http://zip.elevenbasetwo.com",
                cache: false,
                dataType: "json",
                type: "GET",
                data: "zip=" + el.val(),
                success: function(result, success) {
                    $("#city").val(result.city);
                    $("#state").val(result.state);
                }
            });
        }
    });
});

附注创建 JSFiddle 时，请确保从右侧菜单中包含 jQuery。

【讨论】：

这对我也有帮助。如果您决定备份并添加不同的 zip，请记住清空城市和州。我把它放在keyup里面：$("#zip").keyup(function () { $("#city").val(null); $("#state").val(null)
ZipTastic 的问题在于它只会为每个邮政编码提供一个城市。还有其他因素需要考虑。我无法在这里显示所有代码......这很复杂。但如果正确的数据真的很重要，我会列出一些需要考虑的事情。 1）您应该返回每个可用于 zip 的城市/州并将其放在下拉列表中。 2) 还允许城市/州查找，因此如果用户在结果后更改城市或州为不正确的内容，则会产生错误。

【解决方案2】：

对于印度，您可以免费使用 pincode API，您可以使用 JSON 格式的其他信息获取城市。

示例：https://api.postalpincode.in/pincode/641001

用法：https://api.postalpincode.in/pincode/${Your-pincode}

如果发生任何 cors 政策意味着使用这个：

https://cors-anywhere.herokuapp.com/https://api.postalpincode.in/pincode/${Your-Pincode}

例子：

{
  "Name": "Coimbatore",
  "Description": null,
  "BranchType": "Head Post Office",
  "DeliveryStatus": "Delivery",
  "Circle": "Tamilnadu",
  "District": "Coimbatore",
  "Division": "Coimbatore",
  "Region": "Coimbatore",
  "Block": "Coimbatore South",
  "State": "Tamil Nadu",
  "Country": "India",
  "Pincode": "641001"
}

我在Angular-8 中使用它谢谢。

【讨论】：