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