javascript - 通过ajax发送带有多个参数的表单

Question

我正在使用ajax提交表单。该表格由两个表和多个输入组成。表单 ID 为 frmCreateRate。 dataTable1 和 dataTable2 工作正常。我想提交 frmCreateRate 以及 dataTable1 和 dataTable2。我尝试使用此代码，但它显示空值。这是代码:

   $.ajax({
        type: 'POST', 
        url: "/Rate/CreateRate",
        contentType: 'application/json',
        data:  JSON.stringify({Observations:dataTable2, Summary: dataTable1, Input: $('#frmCreateRate').serialize()}),
        dataType: "json",            
    });

Controller :

public ActionResult CreateRate(List<Observations> Observations, List<Summaries> Summary, StaffDomain Input)
{
    //Codes
}

我尝试仅使用dataTable1和dataTable2，两个表中的值都是在 Controller 上捕获的。但是当我添加另一个参数 frmCreateRate 时，它显示空值。

更新:

这是 Controller 内的一些代码:

public ActionResult CreateRate(List<Observations> Observations, List<Summaries> Summary, StaffDomain Input)
   {
        var domain = new StaffRecord
        {
            Diagnosis = Input.Diagnosis,
            Code = Input.Code,
            Time = Input.Time,
            Date = Input.Date,
            Department = Input.Department,
            STaffInformed = Input.STaffInformed,
            TimeArrived = Input.TimeArrived,

        };

        db.StaffRecords.Add(domain);
        db.SaveChanges();

        return RedirectToAction("List");
    }

Answer 1

serialize() 函数用于将表单提交为标准 application/x-www-form-urlencoded MIME，如下所示:

single=MySingleValue&check=checkboxValue&radio=radioValue

您正在发送 application/json MIME，因此您必须自己将表单值一一添加到 JSON 对象，就像您对 dataTable2 所做的那样和dataTable1。强烈建议不要在一个参数中发送复杂的对象。但是，如果您希望忽略建议并继续当前的设计，则可以自动序列化表单，而不是一一添加值。为此，您可以使用 serializeArray() 函数以及辅助方法。

serializeArray() 将表单元素序列化为名称和值的数组，如下所示:

[
  {
    name: "textbox1",
    value: "1"
  },
  {
    name: "textbox2",
    value: "2"
  },
  {
    name: "textbox3",
    value: "3"
  }
]

要将其转换为 JSON 对象，您可以使用此辅助方法:

function serializeFormToJson(selector) {
  var formArray = $(selector).serializeArray();
  var json = {};
  for (var i = 0; i < formArray.length; i++) {
    json[formArray[i]['name']] = formArray[i]['value'];
  }
  return json;
} 

现在您可以将 Ajax 调用更改为:

$.ajax({
    type: 'POST', 
    url: "/Rate/CreateRate",
    contentType: 'application/json',
    data: JSON.stringify({Observations: dataTable2, Summary: dataTable1, Input: serializeFormToJson("#frmCreateRate")}),
    dataType: "json",            
});