使用jquery用JSON数据重新填充表单

2021/01/29 16:11 · jquery ·  · 0评论

我有一个HTML表单,可以通过ajax保存到数据库中。为了获得键/值对的查询字符串,我使用了非常方便的serialize函数,如下所示:

var myData = $("form#form_id").serialize();
$.ajax({
    url: "my_save_script.php",
    type: "post",
    data: myData,
    success: function(msg){
        alert(msg);
    }
});

现在,我想加载一个空白表格,并用数据库中的数据重新填充它,该数据是通过ajax调用作为JSON字符串传递的。我已经能够获得具有正确键/值对的Javascript对象,如下所示:

data = $.parseJSON(data);
data = data[0];

重新填写表格的最简单,最优雅的方法是什么?

请记住,表单的输入元素是文本,选择,复选框和单选。输入元素的名称与数据库列的名称相同,并且是上述data对象中键/值对的键这就是为什么该serialize功能对我如此有效的原因

我想说,最简单的方法就是遵循以下思路:

// reset form values from json object
$.each(data, function(name, val){
    var $el = $('[name="'+name+'"]'),
        type = $el.attr('type');

    switch(type){
        case 'checkbox':
            $el.attr('checked', 'checked');
            break;
        case 'radio':
            $el.filter('[value="'+val+'"]').attr('checked', 'checked');
            break;
        default:
            $el.val(val);
    }
});

基本上,唯一奇怪的是复选框和单选按钮,因为它们需要具有自己的选中属性,好,选中收音机比复选框要复杂一些,因为我们不仅需要检查它们,还需要找到正确的ONE进行检查(使用值)。其他所有内容(输入,文本区域,选择框等)应仅将其值设置为JSON对象中返回的值。

jsfiddle:http : //jsfiddle.net/2xdkt/

如果data [0]包含字段名称,而data [1]包含值,则可以执行以下操作:

您可以对文本框执行以下操作:

$("[name="+data[0]+"]").val(data[1]);

然后像这样的选择:

$("[name="+data[0]+"]").val(data[1]);

请注意,复选框和单选按钮仅在选中时才序列化。

这样的复选框(在jQuery 1.6+之前)是这样的:

$("[name="+data[0]+"]").attr('checked','checked');

单选按钮可能需要做一些额外的工作,具体取决于您如何区分不同的按钮。(IE ID,值等。)

我建议您更改发出ajax请求的方式。使用.post()

$.post("my_save_script.php", {
         data: myData,
    }, function(data) {
        $.each(data, function(i, item){
            $("#"+item.field).val(item.value);
        });      
    }, 
"json");
本文地址:http://jquery.askforanswer.com/shiyongjqueryyongjsonshujuzhongxintianchongbiaodan.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!