我想知道如何使用JSON填充表单吗？
我有一个使用php的JSON字符串，json_encode()
并且我想使用JSON字符串填充表单控件（例如textarea或文本输入）。
我如何不使用外部插件（如我所见的jQuery populate插件）来实现这一目标。
编辑：JSON格式：
[{"id":"41","parent_id":null,"node_name":"name","slug":"","lft":"3","rgt":"4"}]
这是我从json_encode（）得到的
此处存在问题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);
}
});
}
对于仅文本控件（即没有单选框或复选框），可以创建填充函数的简单版本：
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;
}
}
});
};
这是@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格式填充数据，例如$ .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 []），才能使用此功能。
这会变得非常复杂。最好使用工具来解析JSON。您可以很容易地创建简单的表单，但是仍然需要解析它。
请改用此插件：http :
//neyeon.com/2011/01/creating-forms-with-json-and-jquery/
或者您可以使用ext4。
对于奇怪但有效的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/
我们在应用程序中使用了这种奇怪的语法，我们通过编写上述逻辑来解决这个问题。
我发现原始脚本无法与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<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
本文地址：http://jquery.askforanswer.com/shiyongjqueryhejsontianchongbiaodan.html
文章标签：jquery , json
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！
文章标签：jquery , json
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！