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];

重新填充表单最简单，最优雅的方法是什么？

请记住表单的输入元素是text，select，checkbox和radio。输入元素的名称与数据库列的名称相同，并且是上述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);
    }
});

基本上，唯一奇怪的是复选框和无线电，因为它们需要具有已检查的属性，以及已检查。无线电比复选框稍微复杂一些，因为我们不仅要检查它们，还需要找到合适的ONE进行检查（使用该值）。其他所有内容（输入，textareas，选择框等）应该将其值设置为JSON对象中返回的值。

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

Answer 2

如果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');

单选按钮可能需要一些额外的工作，具体取决于您如何区分不同的工作。（I.E. Id，价值等。）

Answer 3

我建议你改变你提出ajax请求的方式。使用.post（）

$.post("my_save_script.php", {
         data: myData,
    }, function(data) {
        $.each(data, function(i, item){
            $("#"+item.field).val(item.value);
        });      
    }, 
"json");

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

3 个答案: