【问题标题】：Using jQuery and JSON to populate forms?使用 jQuery 和 JSON 填充表单？
【发布时间】：2011-09-04 09:42:54
【问题描述】：

我想知道如何使用 JSON 填充表单？

我有一个 JSON 字符串，我使用 php 的 json_encode() 并且我想使用 JSON 字符串来填充表单控件（例如 textarea 或文本输入）。

如何在不使用外部插件的情况下实现这样的事情（比如我看到的 jQuery 填充插件）。

编辑：JSON 格式：

[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]

这是我从 json_encode() 得到的

【问题讨论】：

您想基于 JSON 创建新的表单控件或在现有控件上设置值？还有你的 JSON 是什么样子的？
向现有控件注入值。我将编辑以显示我当前的 JSON 格式

标签： jquery json

【解决方案1】：

这里textarea有问题，那我改成default开关值

使用它为许多控件分配值：

function populate(frm, data) {   
    $.each(data, function(key, value) {  
        var ctrl = $('[name='+key+']', frm);  
        switch(ctrl.prop("type")) { 
            case "radio": case "checkbox":   
                ctrl.each(function() {
                    if($(this).attr('value') == value) $(this).attr("checked",value);
                });   
                break;  
            default:
                ctrl.val(value); 
        }  
    });  
}

【讨论】：

更新了单选按钮和复选框 -- @LaundroMatt
不适用于很多元素（搜索、号码、电话等）
我认为您可以将它们添加到“文本”下方。
我发现 $ctrl.prop("type") 返回 "textarea" 而 $ctrl.attr("type") 没有返回 (Chrome)
@ankur_rajput，你是对的。变量名不会有任何影响。我使用$ctrl 与ctrl 来表示存储JQuery 对象或对元素的引用。存储整个 JQuery 对象会占用大量内存，并且可能会产生其他问题。

【解决方案2】：

对于仅文本控件（即没有单选或复选框），您可以制作一个简单版本的填充函数：

function populate(frm, data) {
  $.each(data, function(key, value){
    $('[name='+key+']', frm).val(value);
  });
}

使用示例：

populate('#MyForm', $.parseJSON(data));

演示：http://jsfiddle.net/Guffa/65QB3/3/

【讨论】：

【解决方案3】：

谢谢诺沙斯。它对我有用。我在您的版本中添加了一个额外的检查，以便能够填充选择选项。

function populateForm(frm, data) {   
$.each(data, function(key, value){  
    var $ctrl = $('[name='+key+']', frm); 
    if($ctrl.is('select')){
        $("option",$ctrl).each(function(){
            if (this.value==value) { this.selected=true; }
        });
    }
    else {
        switch($ctrl.attr("type"))  
        {  
            case "text" :   case "hidden":  case "textarea":  
                $ctrl.val(value);   
                break;   
            case "radio" : case "checkbox":   
                $ctrl.each(function(){
                   if($(this).attr('value') == value) {  $(this).attr("checked",value); } });   
                break;
        } 
    } 
});  


}; // end of populateForm() function

【讨论】：

【解决方案4】：

几乎没有改进（单选按钮除外）：

function resetForm($form)
{
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}

function populateForm($form, data)
{
    resetForm($form);
    $.each(data, function(key, value) {
        var $ctrl = $form.find('[name='+key+']');
        if ($ctrl.is('select')){
            $('option', $ctrl).each(function() {
                if (this.value == value)
                    this.selected = true;
            });
        } else if ($ctrl.is('textarea')) {
            $ctrl.val(value);
        } else {
            switch($ctrl.attr("type")) {
                case "text":
                case "hidden":
                    $ctrl.val(value);   
                    break;
                case "checkbox":
                    if (value == '1')
                        $ctrl.prop('checked', true);
                    else
                        $ctrl.prop('checked', false);
                    break;
            } 
        }
    });
};

【讨论】：

【解决方案5】：

这是@Nowshath 答案的附录

这也适用于多级对象

 populateForm(form, data) {
    $.each(data, function(key, value) {

        if(value !== null && typeof value === 'object' ) {
            this.populateForm(form, value);
        }
        else {
            var ctrl = $('[name='+key+']', form);
            switch(ctrl.prop("type")) {
                case "radio": case "checkbox":
                ctrl.each(function() {
                    $(this).prop("checked",value);
                });
                break;
                default:
                    ctrl.val(value);
            }
        }
    }.bind(this));
}

【讨论】：

这是做什么的。toggleWrappers(key);应该吗？
@LeonardoBeal 。哎呀。我删除了那行：D。这是我的代码库中的一个函数。

【解决方案6】：

如果有人希望从多维 json 格式填充，例如 $.serializeJSON[https://github.com/marioizquierdo/jquery.serializeJSON] 的结果，这里有一个转换为平面格式的函数。

function json2html_name_list(json, result, parent){
    if(!result)result = {};
    if(!parent)parent = '';
    if((typeof json)!='object'){
        result[parent] = json;
    } else {
        for(var key in json){
            var value = json[key];
            if(parent=='')var subparent = key;
            else var subparent = parent+'['+key+']';
            result = json2html_name_list(value, result, subparent);
        }
    }
    return result;
}

具有上述功能的用例示例：

populateForm($form, json2html_name_list(json))

尽管上面的所有示例：

var $ctrl = $('[name='+key+']', frm);

需要改成

var $ctrl = $('[name="'+key+'"]', frm);

防止 jQuery 出现语法错误

注意列表数组必须用数字编写（例如fruit[0]，而不是fruit[]）才能使用此函数。

【讨论】：

【解决方案7】：

这可能会变得相当复杂。最好使用工具来解析您的 JSON。你可以很容易地创建简单的表单，但你仍然需要解析它。

请检查此插件： http://neyeon.com/2011/01/creating-forms-with-json-and-jquery/

或者你可以使用 ext4。

【讨论】：

【解决方案8】：

对于像

这样奇怪但有效的 JSON 语法

    [{'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>},
    {'name':<field_name>,'value':<field_value>}]

看看这个http://jsfiddle.net/saurshaz/z66XF/

我们在我们的应用程序中使用了这种奇怪的语法，我们通过编写上述逻辑来解决问题。

【讨论】：

【解决方案9】：

由于名称选择器中缺少引号，我发现原始脚本不能很好地处理数组 [] 名称：

var $ctrl = $('[name="'+key+'"]', frm);

【讨论】：

【解决方案10】：

我遇到了同样的问题，并进一步开发了上面显示的版本。现在可以有返回值的单个复选框以及返回名称数组的组。编码经过测试、使用和正常工作。

        function populateForm($form, data)
        {
            //console.log("PopulateForm, All form data: " + JSON.stringify(data));

            $.each(data, function(key, value)   // all json fields ordered by name
            {
                //console.log("Data Element: " + key + " value: " + value );
                var $ctrls = $form.find('[name='+key+']');  //all form elements for a name. Multiple checkboxes can have the same name, but different values

                //console.log("Number found elements: " + $ctrls.length );

                if ($ctrls.is('select')) //special form types
                {
                    $('option', $ctrls).each(function() {
                        if (this.value == value)
                            this.selected = true;
                    });
                } 
                else if ($ctrls.is('textarea')) 
                {
                    $ctrls.val(value);
                } 
                else 
                {
                    switch($ctrls.attr("type"))   //input type
                    {
                        case "text":
                        case "hidden":
                            $ctrls.val(value);   
                            break;
                        case "radio":
                            if ($ctrls.length >= 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index)
                                {  // every individual element
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = singleVal = value;
                                    if(elemValue===value){
                                        $(this).prop('checked', true);
                                    }
                                    else{
                                        $(this).prop('checked', false);
                                    }
                                });
                            }
                            break;
                        case "checkbox":
                            if ($ctrls.length > 1) 
                            {   
                                //console.log("$ctrls.length: " + $ctrls.length + " value.length: " + value.length);
                                $.each($ctrls,function(index) // every individual element
                                {  
                                    var elemValue = $(this).attr("value");
                                    var elemValueInData = undefined;
                                    var singleVal;
                                    for (var i=0; i<value.length; i++){
                                        singleVal = value[i];
                                        console.log("singleVal : " + singleVal + " value[i][1]" +  value[i][1] );
                                        if (singleVal === elemValue){elemValueInData = singleVal};
                                    }

                                    if(elemValueInData){
                                        //console.log("TRUE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', true);
                                        //$(this).prop('value', true);
                                    }
                                    else{
                                        //console.log("FALSE elemValue: " + elemValue + " value: " + value);
                                        $(this).prop('checked', false);
                                        //$(this).prop('value', false);
                                    }
                                });
                            }
                            else if($ctrls.length == 1)
                            {
                                $ctrl = $ctrls;
                                if(value) {$ctrl.prop('checked', true);}
                                else {$ctrl.prop('checked', false);}

                            }
                            break;
                    }  //switch input type
                }
            }) // all json fields
        }  // populate form

【讨论】：