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

Question

我有一个 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 函数对我来说非常有效

Answer 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);
    }
});

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

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