无法在Ajax POST中传递表单数据

Question

我正在尝试通过剃刀页面上的Ajax调用提交表单数据。但是我在创建FormData放入Ajax调用时遇到了问题。

这是表格

<form id="dropdownForm" asp-action="Index" asp-controller="Statements" method="post">
<input type="text" id="startInput" name="start" hidden />
<input type="text" id="endInput" name="end" hidden />
<div class="form-group">
    <p>Choose an account</p>
    <select id="AccountDropdown" select class="selectpicker" data-size="10" data-live-search="true" asp-for="@Model.SelectedAccounts" multiple data-actions-box="true" data-style="btn-white" style="right:0; left:auto;">
        @foreach (var item in Model.AccountDropdown)
        {
            if (Model.SelectedAccounts.Any(e => e.AccountValue == item.AccountValue))
            {
                <option value="@item.AccountValue" selected>@item.AccountName (@item.AccountCode)</option>
            }
            else
            {
                <option value="@item.AccountValue">@item.AccountName (@item.AccountCode)</option>
            }
        }
    </select>
</div>
<div class="form-group">
    <button id="accountSubmit" value="Update Selection" class="btn btn-primary">Update Selection</button>
</div>

我在页面上有一个单独的按钮，希望将此表单提交给其他控制器操作。

我所做的是。

let myForm = document.getElementById('dropdownForm');
let formData = new FormData(myForm);

$.ajax({
async: false,
cache: false,
//contentType: 'multipart/form-data',
contentType: false,
type: 'POST',
data : formData,
url: '/Statements/GetStatementData',
success: function (data) {
    tableData = data.StatementsList;
},
error: function (e) {

    Console.log(e);

}
});

变量myForm被正确提取，它具有我需要的所有值和信息。但是FormData对象为空，并且在内部Ajax调用上失败。

这是我声明formData后的对象的屏幕截图

任何帮助将不胜感激。

Answer 1

从let formData = new FormData(myForm);更改为myForm.serialize()

此外，您还应该输入AccountDropdown的名称。

注意：您输入的表单中的标签名称必须与模型中的属性名称相同才能正确进行模型绑定。

let myForm = $('#dropdownForm');
//let formData = new FormData(myForm);

$.ajax({
async: false,
cache: false,
//contentType: 'multipart/form-data',
//contentType: false,
type: 'POST',
data : myForm.serialize(),
url: '/Statements/GetStatementData',
success: function (data) {
    tableData = data.StatementsList;
},
error: function (e) {

    Console.log(e);

}
});

更新：

let myForm = $('#dropdownForm');
let data = myForm.serialize();
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="dropdownForm" asp-action="Index" asp-controller="Statements" method="post">
<input type="text" id="startInput" value="1" name="start" hidden />
<input type="text" id="endInput" value="2" name="end" hidden />
<select id="AccountDropdown" name="account">
   <option value="A1">A1</option>
</select>
</form>

我为serialize（）做一个演示