javascript - 使用jquery提交时如何将数组添加到表单?

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

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

$("#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

在帖子中

并在操作方法中:

enter image description here

我该怎么做?

编辑:

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

最佳答案

有 2 个可能的答案
答案 1
您创建一个 json 对象,并将所有数据从 FORM 读取到该对象以及 TankCalVerts 数组,如下所示

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

并在 $.ajax 方法中 POST 该数据对象。

答案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;
    });

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

关于javascript - 使用jquery提交时如何将数组添加到表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40563244/

相关文章:

javascript - 从 <li> 中删除项目

c# - 命名空间 'Http' 中不存在类型或命名空间名称 'System.Web'

javascript - 当我将鼠标悬停在html按钮上时, Electron 中的单击事件不起作用并且鼠标图标没有更改?

javascript - NodeJS v15.7.0 | Electron v11.2.3 | Uncaught Error : Uncaught TypeError: Class constructor <Class> cannot be invoked without 'new' , 但是什么?

javascript - jQuery 无法在输入中添加类

javascript - 尝试使用javascript取消iPad2上的事件绑定(bind)

asp.net-mvc - 首次使用 ASP.NET MVC 时的主要风险

c# - Kendo 数据源未触发重定向响应的错误处理程序

javascript - 初始化后更新 jQuery 插件设置

Javascript 下拉菜单