javascript - 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

为了使模型绑定(bind)正常工作，您发送的数据结构应与您的操作方法参数匹配。

您尚未分享您的服务器端 View 模型类的外观。无论如何，为了处理这样的情况，我将创建一个单一 View 模型，其中包含您的 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 属性告诉模型绑定(bind)器从请求正文中读取数据并映射将其用于模型绑定(bind)(映射到此参数)。

[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 请求 header 发送。