“走” JSON 响应并填充表单字段——更有效的方法？答案

【问题标题】："Walk" JSON response and populate form fields -- more efficient approach?“走” JSON 响应并填充表单字段——更有效的方法？
【发布时间】：2009-03-11 17:31:22
【问题描述】：

我知道有一种更优雅/更有效的方法（在 php 中我会使用 foreach），但是使用 jQuery，我如何遍历 JSON 响应的 var/val 对并填充具有相同 id 的表单字段JSON 响应中的字段名称？

这是我的 JSON 响应：

[{"field":"svendor_name","value":"Vendor Name Inc."},{"field":"svendor_addr1","value":"1234 Vendor Lane."},{"field":"svendor_addr2","value":"Suite 100"},{"field":"svendor_city"
,"value":"Vendorville"},{"field":"svendor_state","value":"CA"},{"field":"svendor_zip","value":"90210"},{"field"
:"svendor_phone","value":"800-555-1234"}]

这是我用于填充表单的 jQuery 代码：

$(document).ready(function()
{
    $('#svendor_name').bind("change", function()
    {
        var svendor = $("#svendor_name").val();
        svendor = svendor.replace(/&/g, '*');
        $.getJSON("get_vendors.php?sname=" + svendor,
        function(data)
        {
            $.each(data,
                function(i, item)
                {
                    if(item.field == "svendor_name")
                    {
                        $("#svendor_name").val(item.value);
                    }
                    else if(item.field == "svendor_addr1")
                    {
                        $("#svendor_addr1").val(item.value);
                    }
                    else if(item.field == "svendor_addr2")
                    {
                        $("#svendor_addr2").val(item.value);
                    }
                    else if(item.field == "svendor_city")
                    {
                        $("#svendor_city").val(item.value);
                    }
                    else if(item.field == "svendor_state")
                    {
                        $("#svendor_state").val(item.value);
                    }
                    else if(item.field == "svendor_zip")
                    {
                        $("#svendor_zip").val(item.value);
                    }
                    else if(item.field == "svendor_phone")
                    {
                        $("#svendor_phone").val(item.value);
                    }
                    else if(item.field == "svendor_id")
                    {
                        $("#svendor_id").val(item.value);
                    }
            });
        });
    });
});

这一切都很好，但我真的想避免所有 if/else 语句，只使用从 getJSON 方法返回的数据来确定哪些字段填充了哪些值。什么是更清洁/更有效的方法？

-- 尼古拉斯

【问题讨论】：

标签： jquery json

【解决方案1】：

您可以通过将 $.each 替换为以下内容来摆脱所有“if”语句：

$.each(data, function(i, item){
  $("#"+item.field).val(item.value);
});

【讨论】：

反应很好。完美运行，正是我想要的。谢谢。
只要所有字段都是输入字段，它就可以正常工作。但是组合框、复选框和单选按钮呢？没有一个很好的插件可以解决这个问题吗？
是的，组合、复选框和单选按钮在这种情况下可能会很痛苦。对于单选按钮和复选框，这是一个足够好的解决方案：stackoverflow.com/questions/2898883/…

【解决方案2】：

这有什么问题？

$.each(data,
    function(i, item) {
        $("#" + item.field).val(item.value);
    }
});

【讨论】：

复选框和单选按钮表现不佳

【解决方案3】：

如果您的结果如下所示：

[{"field1":"value1","field2":"value2"}]

那么Seb和Chetan提供的代码就可以了

$.each(data, function(i, item){
  $("#"+item.field).val(item.value);
});

如果您的结果如下所示：

{"field1":"value1","field2":"value2"}

然后使用此代码

$.each(data, function(field, value){
  $("#"+field).val(value);
});

【讨论】：

【解决方案4】：

我注意到元素 ID 与 JSON 中的字段相同，如何：

$(document).ready(function() {
    $('#svendor_name').bind("change", function()
    {
        var svendor = $("#svendor_name").val();
        svendor = svendor.replace(/&/g, '*');
        $.getJSON("get_vendors.php?sname=" + svendor,
        function(data) {
                $.each(data, function(i, item) {
                    $('#' + item.field).val(item.value);
                });
        });
    });
});

【讨论】：