如何使用 ajax 发送对象数组以及其他表单数据？答案

【问题标题】：How to send an array of objects along with other formdatas using ajax?如何使用 ajax 发送对象数组以及其他表单数据？
【发布时间】：2016-11-24 12:37:09
【问题描述】：

我想使用 ajax 向 MVC 操作发送一个包含其他形式数据的对象数组。

var arr = [
    { Name: "a", IsActive: "true" },
    { Name: "b", IsActive: "false" },
    { Name: "c", IsActive: "true" },
    { Name: "d", IsActive: "false" },
    { Name: "e", IsActive: "true" }
];

和其他一些表单字段数据。我尝试像这样获取和附加表单数据：

    $(document.body).delegate("form#mainFormCreate", "submit", function () {

    var formData = new FormData($("form#mainFormCreate")[0]);
    var arr = [
            { Name: "a", IsActive: "true" },
            { Name: "b", IsActive: "false" },
            { Name: "c", IsActive: "true" },
            { Name: "d", IsActive: "false" },
            { Name: "e", IsActive: "true" }
    ];

    jQuery.each(arr, function (key, value) {
        formData.append('Features[' + key + ']', value);
    });
    $.ajax({
        url: '@Url.Action("CreateType", "Admin")',
        type: 'POST',
        data:formData,
        success: function (result) {
            ....

        },
        error: function (x, t, e) {
            ....
        },
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

但在服务器端，我在 Features 属性中获得了一个包含 5 个元素的数组，这些元素具有空值。这是我的服务器端代码。我的对象：

    public class ProductTypeCreateModel
   {

       public string ProductTypeName { get; set; }
       public List<Feature> Features { get; set; }
    }

    public class Feature
    {
        public string Name { get; set; }
        public bool IsActive { get; set; }
    }

和我的行动：

    [HttpPost]
        public JsonResult CreateType(ProductTypeCreateModel productType)
        {
...
}

谢谢。

【问题讨论】：

你能把你在Controller中的post方法发给我们吗，同时你忽略了modelBinder的规则。
它需要采用formData.append( 'Features[0].Name', 'a'); formData.append( 'Features[0].IsActive', true);等格式（假设Features是一个包含string Name和bool IsActive的复杂对象
感谢斯蒂芬，它成功了。

标签： javascript jquery arrays ajax asp.net-mvc

【解决方案1】：

为了让DefaultModelBinder绑定数组中的数据，需要按照以下格式追加名称和值

formData.append('Features[0].Name', 'a');
formData.append('Features[0].IsActive', true);
formData.append('Features[1].Name', 'b');
formData.append('Features[1].IsActive', false);
... // etc

以与访问服务器端代码中的值完全相同的方式（即，要获取集合中第二个 Feature 的 Name，您可以使用

string name = productType.Features[1].Name; // returns "b"

参数的名称是productType，所以去掉它，剩下的就是名称需要如何传入FormData。

【讨论】：

【解决方案2】：

序列化你的数据首先尝试 JSON.stringify(formData)

【讨论】：

由此我得到 Features Property 的完全空值。

【解决方案3】：

您可以序列化您的数据，也可以将其包装在一个对象中并发送

var arr = [
        { Name: "a", IsActive: "true" },
        { Name: "b", IsActive: "false" },
        { Name: "c", IsActive: "true" },
        { Name: "d", IsActive: "false" },
        { Name: "e", IsActive: "true" }
];


$.ajax({
    url: '@Url.Action("CreateType", "Admin")',
    type: 'POST',
    data:{data: arr},
    success: function (result) {
        ....

    },
    error: function (x, t, e) {
        ....
    },
    cache: false,
    contentType: false,
    processData: false
});

【讨论】：

我的表单数据呢？我想要表单数据和我的数组数据。
你必须将你的formdata内容添加到对象（data:arr}或将数组内容添加到formdata。

【解决方案4】：

使用以下代码：

 $('form').serializeArray()` or  `$('form').serialize()

【讨论】：

虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将改善答案的长期价值。