Ajax post发送嵌套数组，未定义

Question

我正在使用var form = $("#AAAForm").serializeArray() 序列化来自 AAAForm 的所有值。然后，我使用以下代码将所有值从购物车推送到表单：

var CartPush = [{name: "OrderDetails", value: Cart}]
form.push(CartPush);

然后我使用下面的 Ajax 函数向服务器发送一个 post 请求。

$.ajax({
            type: "POST",
            url: "/Update/Inventory",
            data: form,
            success: function (data) {
                alert(data); // show response
            }
        });

我希望它发送以下内容：（这是console.log(form) 的输出）

0: {name: "FirstName", value: "a"}
1: {name: "LastName", value: "a"}
2: {name: "PostalCode", value: "a"}
3: {name: "HouseNumber", value: "a"}
4: {name: "Street", value: "a"}
5: {name: "City", value: "a"}
6: {name: "State", value: "a"}
7: {name: "Country", value: "a"}
8: {name: "Email", value: "a"}
9: Array(1)
   0:
      name: "OrderDetails"
      value: Array(3)
         0: {ProductId: "760", Name: "Test ", ImageUrl: "258", Price: "0.10", Grade: "Rare", …}
         1: {ProductId: "873", Name: "Test2 ", ImageUrl: "371", Price: "0.20", Grade: "Holo", …}
         2: {ProductId: "744", Name: "Test3 ", ImageUrl: "242", Price: "0.35", Grade: "Rare", …}

但是，下面的内容实际上是发送到服务器的：

FirstName: a
LastName: a
PostalCode: a
HouseNumber: a
Street: a
City: a
State: a
Country: a
Email: a
undefined: 

为什么我添加的数组未定义？还有，我该如何解决？我使用示例数据创建了以下 JSFiddle。 https://jsfiddle.net/s03uLvpy/

我认为这不是问题所在，而是完整的图片。我将数据发布到dotnet core中的以下函数，我收到表单数据就好了，但是，我收到的OrderDetails数据只是空的，我认为是因为发布的数据是未定义的。

 [HttpPost]
 public async Task<IActionResult> AccountAndAddress(OrderViewModel values, List<ProductsShopCartViewModel> OrderDetails)
        {
        return Ok();
        }

Answer 1

要使模型绑定起作用，您发送的数据结构应该与您的操作方法参数相匹配。

您尚未分享服务器端视图模型类的外观。无论如何，为了处理这样的情况，我会创建一个单一的视图模型，它有你的 2 个类作为属性

public class AccountAndAddressVm
{
    public List<AddressVm> Address { set; get; }
    public List<ProductsShopCartViewModel> OrderDetails { set; get; }
}
public class AddressVm
{
    public string Name { set; get; }
    public string Value { set; get; }
}
public class ProductsShopCartViewModel
{
    public int ProductId { set; get; }
    public string Name { set; get; }
    public int Quantity { set; get; }
}

并使用这个新的AccountAndAddressVm 类作为我的操作方法的参数，同时使用FromBody 属性装饰器。 FromBody 属性告诉模型绑定器从请求正文中读取数据并映射将其用于模型绑定（映射到此参数）。

[HttpPost]
public ActionResult AccountAndAddress([FromBody] AccountAndAddressVm OrderDetails)
{
    // Here I am simply returning what we received fore debugging.
    return Ok(OrderDetails );
}

现在我们要做的就是发送一个具有相同结构的 JS 对象。

var form = [{ name: "FirstName", value: "Shyju" },
            { name: "PostalCode", value: "98052" },
            { name: "City", value: "Redmond" }];


var cart = [{ "ProductId": "760", "Name": "Test ",Amount": 1 },
            { "ProductId": "360", "Name": "Xox ",Amount": 4 }
           ];

var d = { Address: form, OrderDetails: cart };
// the "d" object has similar structure like our AccountAndAddressVm class

$.ajax({
         type: "POST",
         url: "/Home/AccountAndAddress",
         data: JSON.stringify(d),
         contentType:"application/json",
         success: function (data) {
               console.log('response',data);
         }
});

JSON.stringify 方法将转换 JavaScript 对象并创建它的字符串表示形式。 contentType:"application/json" 属性将告诉 jQuery 发送 application/json 作为 Content-Type 请求标头。