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

Posted 2023-02-22

【中文标题】使用 jquery 使用 JSON 数据重新填充表单

【英文标题】：Use jquery to re-populate form with JSON data

【发布时间】：2012-04-06 03:18:00

【问题描述】：

我有一个 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 函数对我来说如此有效的原因

【问题讨论】：

只有当你设置一个约定时，你才能以一种简单的方式做到这一点，例如用你收到的 JSON 对象的键值来分配你的表单元素的 ID。换句话说，表单和服务器应该遵守一些标准约定。如果是这样，您可以遍历数据以查找并填充每个表单元素。

是的，表单元素的name属性与JSON对象的键值相同。

在这种情况下，您可以尝试类似 for (var key in data) $("[name='" + key + "']").val(data[key]); 。这将使用接收到的对象的属性填充您的表单元素。如果您收到一个键值数组，则需要对数组进行迭代。

复选框、单选框和选择呢？

关于复选框和单选按钮的要点。它适用于选择，但您需要分别处理复选框和单选按钮。

【参考方案1】：

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

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

【讨论】：

谢谢，是的，我知道如何单独设置每个元素，但这意味着我需要一个if ... elif ... elif ... else 过滤器来处理 4 种输入元素。没关系，我现在就是这样做的，我只是不知道是否有一种快速简单的方法来做到这一点，就像serialize 函数在从表单中保存数据时节省了大量编码。

你的意思是如果有一个反序列化（）函数？你可以看看这个插件：code.google.com/p/jquery-nmx-deserialize 虽然它似乎被放弃了...... :(

【参考方案2】：

我想说最简单的方法是这样的：

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

【讨论】：

嘿，谢谢。你为我节省了一些时间。我得到的是加号而不是填充到表单中的空格，但这是一个小调整。再次感谢。

你为什么不使用相同的收音机和复选框？如果我有一个复选框，应该在给定特定值$el.filter('[value="'+val+'"]').attr('checked', 'checked'); 的情况下进行检查，效果很好。很好的代码，谢谢！

我的想法是，对于复选框，名称应该唯一地标识给定表单中的元素。由于 radio 元素通常会共享 name 属性，因此我只想在绝对必要时执行更密集的 value 属性过滤器。但你是对的，它应该同样适用于复选框。很高兴你发现它有用！

对于 jQuery 1.6+：$el.prop('checked', true);。如果 json 值是布尔值（我的情况），它必须是：$el.prop('checked', val);

@geneb。我最初的想法是只有被选中的复选框才会提交它们的值。因此，如果与复选框对应的名称出现在我们的数据对象中，则根据定义，它之前已被检查过。不过，我认为这对我来说有点幼稚，因为从数据库返回的数据无疑将包含所有值。在这种情况下，我认为上面的 Mahmoodvcs 评论应该可以解决问题。

【参考方案3】：

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

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