Jquery不会用ajax Json填充值答案

【问题标题】：Jquery wont populate values with ajax JsonJquery不会用ajax Json填充值
【发布时间】：2016-12-23 10:59:29
【问题描述】：

我希望你们中的某个人能以此为我指明正确的方向。我正在尝试创建一个 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。我也尝试按班级选择它，它不会更新。你有什么建议吗？

【问题讨论】：

我想也许使用 val() 而不是 append() 可以解决问题
如果您确认响应正确返回，您可以推断它一定是您的.append 方法。您可以在 Chrome 或 Firefox 控制台中运行该代码，以验证它是否像 $('input[name="tcity"]').val('test'); 一样工作
好的，在控制台中我收到错误跨域请求被阻止：同源策略不允许读取zipcodeapi.com/rest/secret/info.json/11220/… 的远程资源。（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。（未知）

标签： jquery json ajax rest

【解决方案1】：

使用 .val() 代替

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

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

【讨论】：

我已经尝试过 val & append。我什至尝试在准备流行表单字段的文档下方加载声明 val。我认为 result.city 并没有“绑定”到 json。

【解决方案2】：

我不知道 append 对输入元素有什么影响，

但是，如果您想更改输入的值，您应该使用 val() 或 attr() 更改属性“值”，目前 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>

【讨论】：