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

一尘不染

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

json

我有一个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功能对我如此有效的原因

阅读 477

2020-07-27

共1个答案

一尘不染

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

// 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/

2020-07-27