使用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);
    }
});

基本上,只有那些有奇怪的复选框和收音机,因为他们需要有自己的checked属性,好了,检查.无线电比复选框稍微复杂一些,因为我们不仅要检查它们,还需要找到合适的ONE进行检查(使用该值).其他所有内容(输入,textareas,选择框等)应该将其值设置为JSON对象中返回的值.

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