根据邮政编码自动填写州和城市

时间:2014-03-21 16:24:51

标签: javascript jquery ajax json forms

我是网络开发的新手,我遇到了一个我正在为我们的业务建立的注册表格的问题。我正在使用本指南: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);
    });
}
});

2 个答案:

答案 0 :(得分:6)

这对你有用。 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);
                }
            });
        }
    });
});

P.S。当您创建JSFiddle时,请确保从右侧的菜单中包含jQuery。

答案 1 :(得分:0)

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

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

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

如果发生任何核心政策,请使用此

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

我正在Angular-8中使用它 谢谢,