JSON 数据到表单字段中答案

【问题标题】：JSON Data into form fieldsJSON 数据到表单字段中
【发布时间】：2013-12-09 20:54:34
【问题描述】：

我是 Javascript 和 Jquery 的新手，所以请原谅我的无知。我试图让我的表单字段使用我从在线 .asp 数据库中提取的 JSON 数据根据邮政编码自动填充城市和州。我收到了一个成功的 JSON 响应，其中包含我可以在我的开发工具窗口中查看的数据，但无法让它填充我的表单上的字段。

我的代码是：

$(function() {

    var cache = {};
    var container = $("#validate");
    var errorDiv = container.find("div.text-error");

    /** Handle successful response */
    function handleResp(data)
    {
        // Check for error
        if (data.error_msg)
            errorDiv.text(data.error_msg);
        else if ("City" in data)
        {
            // Set city and state
            container.find("input[name='City']").val(data.City);
            container.find("input[name='State']").val(data.State);
        }
    }

    // Set up event handlers
    container.find("input[name='zipcode']").on("keyup change", function() {
        // Get zip code
        var zipcode = $(this).val().substring(0, 5);
        if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
        {
            // Clear error
            errorDiv.empty();

            // Check cache
            if (zipcode in cache)
            {
                handleResp(cache[zipcode]);
            }
            else
            {
                // Build url
                var url = "http://dev.xxx.com/ASPFetchers/GetSPROCAsXML.asp?SPROC=EG_GetZipCodeInfo%20/"+(zipcode)+"/&F=JSON";

                // Make AJAX request
                $.ajax({
                    "url": url,
                    "dataType": "json"
                }).done(function(data) {
                    handleResp(data);

                    // Store in cache
                    cache[zipcode] = data;
                }).fail(function(data) {
                    if (data.responseText && (json = $.parseJSON(data.responseText)))
                    {
                        // Store in cache
                        cache[zipcode] = json;

                        // Check for error
                        if (json.error_msg)
                            errorDiv.text(json.error_msg);
                    }
                    else
                        errorDiv.text('Request failed.');
                });
            }
        }
    }).trigger("change");
});

我在表单上的标记如下：

    <div id="validate">                                                                             
<label>Zip Code</label>                         
<input type="text" name="zipcode" id="zipcode" size =" 5" maxlength = "5" />                            
<div class="text-error"></div>                                                      

<label>City</label>                         
<input type="text" name="City" id="City" />                                                 

<label>State</label>                            
<input type="text" name="State" id="State" />                           
<script type="text/javascript" src="../zip/includes/zip2.js"></script>      
</div>
</div>

我可以在我的开发工具中查看的 JSON 是（基于邮政编码 06702）：

{"items":[{"City":"WATERBURY","County":"NEW%20HAVEN","State":"CT","StateName":"CONNECTICUT","Latitude":"0.7252836","Longitude":"-1.274794"},

谁能帮我解决如何从这个字符串中获取信息并让它填充“City”和“State”字段？感谢您的时间和知识。

【问题讨论】：

看起来是时候学习如何使用调试器了？

标签： javascript php jquery json

【解决方案1】：

如果您查看您在此处发布的数据，您将需要在数据中使用 items 数组。

container.find('input[name="City"]').val(data.items[0].City);
container.find('input[name="State"]').val(data.items[0].StateName);

【讨论】：

我也试过了，同样，字段中没有填充任何内容
@Cinq 在handleResp 内部执行console.log 的data。发布的内容是否与您在问题中发布的完全相同？如果是这样，请注意您必须将 else if('City' in data) 检查更改为 else if('City' in data.items[0])
The else if('City' in data.items[0]) 解决了我的问题，现在两个字段都正确填充。谢谢

【解决方案2】：

返回的对象看起来是一个对象数组。

所以首先获取 items 数组并引用其中的第一项。

function handleResp(data) {
        // Check for error
        if (data.error_msg)
            errorDiv.text(data.error_msg);
        else if ("City" in data) {
            var info = data.items[0];
            // Set city and state
            container.find("input[name='City']").val(info.City);
            container.find("input[name='State']").val(info.State);
        }
    }

【讨论】：