jquery - 使用 jQuery 将表单序列化为对象数组

Question

我正在尝试将特定形式的所有输入序列化到一个对象数组中，以便我可以将它传递给我的控制器操作，然后一次更新多行。我的问题是序列化部分......它以某种方式搞砸了。

这是我生成表单的地方：

$.each(content, function (i, item) {
                    var html = "<br />Choice ID<br /><input type='text' name='QuestionChoicesId' value='"
                        + item.QuestionChoicesId + "'><br />Choice Display Text<br /><input type='text' name='DisplayText'  value='"
                        + item.DisplayText + "'><br />Order of Display<br /><input type='text' name='OrderNumber' value='"
                        + item.OrderNumber
                        + "'>";
                    $(html).appendTo("#choices");
                });

这就是我想要做的：

console.log($('#choices :input').serializeArray());
        $.ajax({
            type: "POST",
            url: "/Question/UpdateQuestionchoices/",
            data: $('#choices :input').serialize()
        });

这是console.log输出：

它应该是一个对象数组，每个对象都有QuestionChoicesId、DisplayText和OrderNumber。

Answer 1

首先建议您包装每个组，因此可以在包装器上构建一个循环

$.each(content, function (i, item) {
    var html = '<div class="control_group">';

    /* your exisiting string build code*/

    html += '</div>';
});

创建数组：

var ajaxData = $('.control_group').map(function (idx,group) {
    var data = {};
    $(group).find(':input').each(function () {
        data[this.name] = this.value;
    });
    return data;
}).get();

DEMO

Answer 2

您可以使用：jquery.serializeToJSON - https://github.com/raphaelm22/jquery.serializeToJSON 它已准备好与表单 ASP MVC 一起使用

var obj = $("form").serializeToJSON();

Answer 3

尽管它可能是这样的结构，但我认为它会按照您的预期发布。您是否查看过它是如何在 ajax 调用中发布的？我做了同样的事情，它按预期工作并正确绑定。