使用jquery提交时如何将数组添加到表单中？答案

【问题标题】：How to add array to form when using jquery submit?使用jquery提交时如何将数组添加到表单中？
【发布时间】：2017-03-26 14:02:32
【问题描述】：

我在页面上有一个表单，输入的数据被发布到服务器。我现在想在帖子中添加一个数组，如下所示：

$("#createTankForm").submit(function() {
    if ($(this).valid()) {
        var data = $(this).serializeArray();
        var celVerLst = [];
        var formsLst = $(".TankCalVertList").find("#createTankForm .adminRow");
        $(formsLst).each(function (i, v) {
            var celVert = {
                Number: $(this).find("#Number").val(), 
                Border: $(this).find("#Border").val(),
                Volume: $(this).find("#Volume").val(),
                Constant: $(this).find("#Constant").val(),
            }
            celVerLst.push(celVert);
        });
        data.push({
            name: "TankCalVerts",
            value: celVerLst
        });
        data = jQuery.param(data);
        // at this point TankCalVerts is "object[]"
        $.automation.worker.postUserData(this.action, data, function(data) {
            $(".AdmClicked").click();
        });
    } else {
        $(this).addClass("invalidForm");
    }
    return false;
});

正如我在上面的评论中所写的那样

TankCalVerts=%5Bobject+Object%5D%2C%5Bobject+Object%5D

在帖子中

而在action方法中：

我该怎么做？

编辑：

postUserData: function(url, data, callback) {
    //$.LoadingOverlay("show");
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        success: function(data) {
            if (callback) {
                callback(data);
                //$.LoadingOverlay("hide");
            }
        },
    });
}

【问题讨论】：

我们不知道 $.automation.worker.postUserData() 对这些数据做了什么，也不知道您希望以什么格式接收它。显示所有相关代码
@charlietfl 请检查编辑
为什么不首先正确生成表单控件（您当前创建的元素具有重复的id 属性，这是无效的html，所以我假设name 属性也是重复的）。对于现有的集合项目，请使用自定义 EditorTemplate 的 for 循环（请参阅 this answer），或者如果您动态添加项目请参阅 this answer
那么脚本就变成了$("#createTankForm").submit(function() { $.post(yourUrl, $(this).serialize(), function() {

标签： javascript jquery asp.net-mvc asp.net-mvc-5

【解决方案1】：

有 2 个可能的答案
答案 1 是
您创建一个 json 对象并将所有数据从 FORM 读取到该对象以及像这样的 TankCalVerts 数组

data: { id: $("#INPUTID").val(), Lo:$("#LoID").val(), Level:$("#LevelID").val(),../*similerly read all values here..,*/, TankCalVerts: celVerLst }

并在 $.ajax 方法中发布此数据对象。

答案 2： 像这样更改您的代码
删除此部分

 data.push({
    name: "TankCalVerts",
     value: celVerLst
 });

并替换您的循环 $(formsLst).each 像这样

var Counter = 0;

$(formsLst)
    .each(function (i, v) {
        data.push({
            name: "TankCalVerts[" + Counter + "].Number",
            value: $(this).find("#Number").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Border",
            value: $(this).find("#Border").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Volume",
            value: $(this).find("#Volume").val()
        });
        data.push({
            name: "TankCalVerts[" + Counter + "].Constant",
            value: $(this).find("#Constant").val()
        });
        Counter = Counter + 1;
    });

这会将列表/数组相应地添加到您的数据中，并让其余代码保持原样。它应该将数组/列表与表单数据一起发布。

【讨论】：

我已经完成了一个类似的解决方案，但我试图避免它，因为我在这里有很多参数并且不想全部写出来。我的解决方案为我提供了一种方法，但效果却很好
1 还有一个解决方案（更像是一种技巧）；）您将子数组转换为 JSON 字符串并作为单个参数发送，然后在服务器端进行 Json 解码。
这是另一种方式。虽然我更喜欢下面显示的答案

【解决方案2】：

经过深思熟虑和一位才华横溢的朋友的帮助，我们想到了这个：

                        var objFormData = {};
                        for (var intIndex = 0; intIndex < data.length; intIndex++) {
                            objFormData[data[intIndex].name] = data[intIndex].value;
                        }

我们获取序列化数据并将其转换为一个对象，然后将其作为 JSON 发布。

我已经完成了一个解决方案，我构建了自己的对象，但在这种情况下，它最多有 30 个参数，我试图避免它，并且上面的简单循环解决了这个问题。

完整答案：

                        var objFormData = {};
                        for (var intIndex = 0; intIndex < data.length; intIndex++) {
                            objFormData[data[intIndex].name] = data[intIndex].value;
                        }

                        $.automation.worker
                            .postJson(this.action,
                                JSON.stringify(objFormData),
                                function(data) {});

post json 函数：

    postJson: function(url, data, callback) {          
        $.LoadingOverlay("show");

        $.ajax({
            url: url,
            type: "POST",
            data: data,
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                if (callback)
                    callback(data);

                $.LoadingOverlay("hide");
            }
        });

【讨论】：