使用jQuery和JSON填充表单？
我想知道如何使用JSON填充表单是否可行？
我有一个JSON字符串，我使用php的json_encode()我想使用JSON字符串来填充表单控件（如textarea或文本输入）。
如何在不使用外部插件的情况下实现此类function（如jQuery populate插件，我看到了）。
编辑：JSON格式：
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
这是我从json_encode（）得到的
这里有textarea的问题，然后我将其更改为默认的开关值
使用此选项可将值分配给多个控件：
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); } }); }
对于文本控件（即没有无线电或复选框），您可以创建一个简单版本的填充函数：
function populate(frm, data) { $.each(data, function(key, value){ $('[name='+key+']', frm).val(value); }); }
用法示例：
populate('#MyForm', $.parseJSON(data));
演示： http ： //jsfiddle.net/Guffa/65QB3/3/
谢谢Nowshath。 它对我有用。 我在您的版本中添加了额外的检查，以便能够填充选择选项。
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
几乎没有改进（单选按钮除外）：
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; } } }); };
如果有人想要从多维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 []）编写，以便使用此函数。
这是@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)); }
这可能变得非常复杂。 最好使用工具来解析您的JSON。 您可以非常轻松地创建简单表单，但仍需要解析它。
请改为检查此插件： http ： //neyeon.com/2011/01/creating-forms-with-json-and-jquery/
或者你可以使用ext4。
对于一个奇怪但有效的JSON语法，如
[{'name':,'value':}, {'name':,'value':}, {'name':,'value':}, {'name':,'value':}]
看看这个http://jsfiddle.net/saurshaz/z66XF/
我们在我们的应用程序中使用了这种奇怪的语法，我们通过编写上面的逻辑来解决这个问题。
我发现原始脚本与array []名称不兼容，因为名称选择器中缺少引号：
var $ctrl = $('[name="'+key+'"]', frm);
我有同样的问题，并进一步开发了上面显示的版本。 现在可以使用返回值的单个复选框以及返回名称数组的组。 编码经过测试，使用和正常工作。
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