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

时间:2016-11-12 13:17:49

标签: 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 +对象%5D%2C%5Bobject +对象%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 个答案:

答案 0 :(得分:1)

有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;
    });

这将相应地将List / Array添加到您的Data中,并将剩余的代码保持原样。它应该发布数组/列表以及表单数据。

答案 1 :(得分:0)

经过一些思考和一位出色的朋友的帮助后,我们提出了这个问题:

                        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) {});

发布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");
            }
        });