Jquery不会用ajax Json填充值

时间:2016-08-16 22:38:31

标签: jquery json ajax rest

我希望你们中的一个能指出我正确的方向。我正在尝试创建一个Jquery脚本,通过输入邮政编码填充用户的城市和州。

这是我的剧本

<script type="text/javascript">//
// Make AJAX request
$(document).ready(function() {
jQuery.support.cors = true;
$("#contact_phonenumber").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://www.zipcodeapi.com/rest/SECRETAPIKEY/info.json/"+  el.val() +"/radians",
            cache: false,
            dataType: "json",
            type: "GET",
            //data: "zip=" + el.val(),
            success: function(result, success) {
                $('input[name="tcity"]').append(result.city);
                $('input[name="tstate"]').append(result.state);
            }
        });
    }
});
});
</script>

我正在使用Tamperdata,我可以在Keyup上看到zip正在提交正确的请求,这是回复

{"zip_code":"10001","lat":0.711233,"lng":-1.29149,"city":"New York","state":"NY","timezone":{"timezone_identifier":"America\/New_York","timezone_abbr":"EDT","utc_offset_sec":-14400,"is_dst":"T"},"acceptable_city_names":[{"city":"Empire State","state":"NY"},{"city":"G P O","state":"NY"},{"city":"Greeley Square","state":"NY"},{"city":"Macys Finance","state":"NY"},{"city":"Manhattan","state":"NY"}]

但代码并没有更新我的表单字段tstate和tscity。我也尝试按类选择它,它不会更新。你有什么建议吗?

2 个答案:

答案 0 :(得分:0)

使用.val()代替

$('input[name="tcity"]').val(result.city);
$('input[name="tstate"]').val(result.state);

更新:我在codepen上创建了一个示例。问题是您需要注册客户端访问。您的API密钥将具有“js-”前缀。

答案 1 :(得分:0)

我不知道追加对输入元素的影响,

但是如果你想改变输入的值,你应该使用val()或attr()更改attritube“value”,目前var()是你的情况的最佳选择。 我希望它为你工作。

<script type="text/javascript">//
        // Make AJAX request
        $(document).ready(function() {
        jQuery.support.cors = true;
        $("#contact_phonenumber").keyup(function() {
        var el = $(this);
        if (el.val().length === 5) {
        $.ajax({
        url: "http://www.zipcodeapi.com/rest/SECRETAPIKEY/info.json/"+  el.val() +"/radians",
                    cache: false,
                    dataType: "json",
                    type: "GET",
                    //data: "zip=" + el.val(),
                    success: function(result, success) {
                        $('input[name="tcity"]').val(result.city);
                        $('input[name="tstate"]').val(result.state);
                    }
                });
            }
        });
        });
        </script>