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

Posted 2023-02-22

【中文标题】如何使用 ajax 发送对象数组以及其他表单数据？

【英文标题】：How to send an array of objects along with other formdatas using 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的复杂对象

感谢斯蒂芬，它成功了。

【参考方案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()

【讨论】：

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