JSON数据转换为表单字段

JSON Data into form fields

本文关键字:表单 字段 转换 数据 JSON      更新时间:2024-05-29

我是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"},

有人能帮我解决如何从这个字符串中获取信息并将其填充到"城市"answers"州"字段中吗?感谢您的时间和知识。

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

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

返回的对象看起来是对象数组

因此,首先获取项目数组并引用其中的第一个项目。

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