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

Question

我正在尝试将特定形式的所有输入序列化为对象数组，以便我可以将其传递给我的 Controller 操作，然后一次更新多行。我的问题是序列化部分...它不知何故搞砸了。

这是我生成表单的地方:

$.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