0

我有这个对象

{
  "Data1": 1,
  "Data2": "some string",
  "Data3": [
    {
      "ID": 0,
      "Name": "some name",
      "SomeArray": []
    },
    {
     "ID": 0,
     "Name": "another name",
     "SomeArray": [
       "DataA": 0,
       "DataB": "some data again"
     ]
    }],
  "Data4": "some string again"
}

它将在控制器中接收的模型是这样的：

public class Data 
{
   public int Data1 { get; set; }
   public string Data2 { get; set; }
   public List<AnotherClass> Data3 { get; set; }
   public string Data4 { get; set; }
}

public class AnotherClass
{
   public int ID { get; set; }
   public string Name { get; set; }
   public List<DataList> SomeArray { get; set; }
}

public class DataList
{
   public int DataA { get; set; }
   public string DataB { get; set; }
}

要设置的数据Data3来自一个表，其中从模式弹出窗口中检索新输入并填充到表中。SomeArray数据来自一个下拉菜单，该下拉菜单使用Select2工具在下拉菜单中设置多个选项。

这个想法是，一旦用户单击“保存”，它将获取所有数据，包括表中的数据并形成这个 JSON 对象。从这个对象，我想把它转换成FormData. 但是，当它迭代到 时Data3，即使我将其字符串化，它也不会将其转换为对象数组。我也试过这个Convert JS Object to form data但没有成功。

这是我到目前为止所做的：

var details = GetDetails(); // This contains `Data1`, `Data2` and `Data4`
var data3 = GetData3FromTable(); // This contains the list of `Data3`

var result = new FormData();
for (var key in details) {
   result.append(key, details[key]);
}

result.append("Data3", JSON.stringify(data3));
result.append("UploadFile", $("#upload")[0].files[0]);

// do ajax put or post after this line

是否有任何 jquery 或 javascript 插件可用于将此对象转换为FormData？或者有没有其他方法可以将其转换为FormData?

4

2 回答 2

1

我找到了这个链接object-to-form-data，它可以转换任何对象，包括嵌套数组并将文件上传到FormData. 但是，只需要进行一项更改：

从链接中，替换objectToFormData(obj[property], fd, property);为objectToFormData(obj[property], fd, formKey);。这样，它将原始属性设置为键。FormData当它被传递给控制器​​时的输出将是这样的：

Data1: 1
Data2: some string
Data3[0][ID]: 0
Data3[0][Name]: some name
Data3[0][SomeArray]: []
Data3[1][ID]: 0
Data3[1][Name]: another name
Data3[1][SomeArray][0][DataA]: 0
Data3[1][SomeArray][0][DataB]: some data again
Data4: some string again

我希望这对其他人有帮助！

于 2020-11-17T10:20:45.893 回答
0

您可以在 HTML 表单中发送深度嵌套的数据，但我注意到不同的 Web 服务器可能会以不同的方式解释更复杂的结构，因此您可能需要检查您的框架/应用程序的中间件以确保正确解码。您可能会发现将值读入 Javascript 并从那里发送数据更容易。

你的Data3对象可以用这样的东西来表示：

<input type="text" name="data[Data3][0][id]" value="0">
<input type="text" name="data[Data3][0][Name]" value="some name">
<input type="text" name="data[Data3][0][SomeArray][]" value="">

您需要一个包含子元素的“父”字段（data在本例中）。

请注意，您必须小心任何[]- 您可能需要像上面那样手动指定数组索引，否则将不会尊重值的“分组”。

还要注意以 : 结尾的名称[]，即使它是空字符串，这些字段仍会发送值，因此您可能需要将其过滤掉。

于 2020-11-16T18:46:18.350 回答