javascript - 根据邮政编码自动填充州和城市

标签 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);
    });
}
});

最佳答案

这应该适合您。 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。

关于javascript - 根据邮政编码自动填充州和城市,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22564175/

相关文章:

javascript - 防止将数据保存到 localStorage,直到所有输入均已填满

javascript - Canvas 上的 HTML5 文本框位置

javascript - Onclick 类更改不起作用

java - JSF 2 属性不反射(reflect) ajax 操作后的更改

jquery - 从 jQuery 访问 Web 服务 - 跨域

javascript - 显示加载 gif 直到 ajax 调用加载完毕(并且不与 setInterval 交互)

javascript - 由于 zindex,CSS 悬停功能无法正常工作

javascript - KnockoutJS IF 绑定(bind) - 保留 DOM

javascript - 在 IE 中使用 JS、HTML 和 CSS 自定义文件上传

javascript - PHP 到 JS : printing js variable (like PHP echo) compatible with AJAX responseText?