MVC项目中Ajax POST请求返回400 Bad Request语法错误如何解决

问题说明 #

在MVC Web应用中开发表格行删除功能时，点击删除按钮唤起Bootstrap确认模态框，点击模态框的确认删除按钮发起Ajax POST请求到DynamicGrid/DeleteRecord接口时始终返回400错误，改为GET请求可正常访问。 #

错误原因 #

你的代码存在两个核心问题：

1. 参数作用域错误：确认按钮的click事件绑定在delete函数外部，无法访问到delete函数的id、entityObject、masterRecordEntityObject三个入参，导致请求参数为空/未定义
2. 请求格式不匹配：Ajax配置了contentType: 'application/json; charset=utf-8'，但传递的data是未序列化的普通JS对象，后端无法按JSON格式解析参数

修复后代码 #

前端删除逻辑 #

function delete(id, entityObject, masterRecordEntityObject) {
    var dialogTitle = "Delete Item?";

    var data = "<div class='modal-header'>";
    data += "<h4 class='modal-title'>" + dialogTitle + "</h4>";
    data += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>";
    data += "<span aria-hidden='true'>&times;</span>";
    data += "</button>";
    data += "</div>";
    data += "<div class='modal-body'>";
    data += "<p><i class='fas fa-exclamation-triangle' style='float:left; margin:4px 7px 20px 0;'></i> Please click delete to confirm deletion.</p>";
    data += "</div>";
    data += "<div class='modal-footer'>";
    data += "<a class='btn btn-danger' id='btnConfirmDelete'>Delete</a>";
    data += "<button class='btn btn-primary' type='button' data-dismiss='modal'>Cancel</button>";
    data += "</div>";

    $('#myModalContent').html(data);
    $('#myModal').modal('show');

    // 事件绑定移到delete函数内部，保证可以拿到参数，加off避免重复绑定
    $("#btnConfirmDelete").off('click').on('click', function () {
        $.ajax({
            url: '@Url.Action("DeleteRecord", "DynamicGrid")',
            type: 'POST',
            // 移除contentType配置，使用默认表单编码格式和后端参数匹配
            data: {
                "recordId": id,
                "entityObject": entityObject,
                "masterRecordEntityObject": masterRecordEntityObject
            },
            dataType: 'json',
            async: true,
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);
            },  
            success: function (result) {
                alert(result);
            },
        });
    });
}

后端控制器代码（无需修改） #

[HttpPost]
public Task<IActionResult> DeleteRecord(int recordId, string entityObject, string masterRecordEntityObject)
{
    // 业务逻辑
    return Content("OK");
}

可选方案：保留JSON传参格式 #

如果你需要使用JSON格式传递参数，需要做两处额外修改：

1. 前端Ajax的data改为JSON.stringify({recordId: id, entityObject: entityObject, masterRecordEntityObject: masterRecordEntityObject})
2. 后端新增参数接收模型，并且在参数前加[FromBody]标记：

// 新增模型类
public class DeleteRequest
{
    public int RecordId { get; set; }
    public string EntityObject { get; set; }
    public string MasterRecordEntityObject { get; set; }
}

// 控制器方法修改
[HttpPost]
public Task<IActionResult> DeleteRecord([FromBody] DeleteRequest request)
{
    // 业务逻辑
    return Content("OK");
}

补充截图 #

• 网络面板：
• 控制台面板：

内容的提问来源于stack exchange，提问作者Anonymous