为何Ajax无法向Controller提交数据？提交时跳转至其他URL

我来帮你排查下这个问题，这种Ajax提交后意外跳转页面的情况，大多是因为表单默认提交行为没被阻止，或者Ajax请求的配置存在疏漏，咱们一步步来解决：

1. 阻止表单的默认提交行为 #

这是最常见的原因！如果你的保存按钮放在 <form> 标签里，并且按钮类型是 submit，点击按钮时会优先触发表单的默认提交逻辑，直接跳转到表单的action指定的URL（如果没指定就跳当前页），完全绕过你的Ajax代码。

解决方法有两种：

• 修改按钮类型：把按钮的type改成button，这样就不会触发表单提交：

  <button type="button" onclick="save()">保存</button>
  

• 在函数里阻止默认行为：如果必须用submit类型的按钮，就在save函数里添加阻止默认行为的代码：

  function save(event) {
      event.preventDefault(); // 关键：阻止表单的默认提交动作
      // 后续的Ajax逻辑写在这里
  }
  

  调用的时候要把event传进去：

  <button type="submit" onclick="save(event)">保存</button>
  

2. 完善Ajax请求的配置 #

从你给出的代码片段看，只定义了BookingDetails对象，但缺少完整的Ajax请求代码。这里给你补全正确的Ajax请求模板，注意几个关键配置：

function save(event) {
    event.preventDefault(); // 先阻止默认行为

    // 确保所有表单值都正确获取（你的代码截断了，要补全剩余字段）
    var BookingDetails = {
        VehicleModel: document.getElementById('VehicleModel').value,
        VehicleRegNo: document.getElementById('VehicleRegNo').value,
        AppointmentTime: '1',
        CustomerName: document.getElementById('CustomerName').value,
        ContactNo: document.getElementById('ContactNo').value
        // 补充其他需要提交的字段
    };

    $.ajax({
        url: '/YourController/YourAction', // 替换成你实际的Controller和Action路径
        type: 'POST', // 必须指定POST，和Controller的[HttpPost]对应
        contentType: 'application/json; charset=utf-8', // 告诉后端接收JSON格式数据
        data: JSON.stringify(BookingDetails), // 将JS对象转为JSON字符串
        success: function(response) {
            console.log('数据提交成功！', response);
            // 这里可以添加成功后的操作，比如弹出提示、刷新页面等
        },
        error: function(xhr, status, error) {
            console.error('提交失败：', error);
            // 处理错误情况，比如提示用户提交失败
        }
    });
}

3. 检查Controller的Action是否正确接收数据 #

要确保后端的Action能正确接收前端传过来的JSON数据：

• 标记[HttpPost]特性，指定只接收POST请求；
• 如果是ASP.NET Core，需要给参数添加[FromBody]特性，告诉框架从请求体里解析JSON；
• 确保后端的模型类（比如BookingViewModel）和前端的BookingDetails对象属性名称完全一致（大小写敏感）。

示例代码（ASP.NET Core）：

public class BookingViewModel
{
    public string VehicleModel { get; set; }
    public string VehicleRegNo { get; set; }
    public string AppointmentTime { get; set; }
    public string CustomerName { get; set; }
    public string ContactNo { get; set; }
    // 对应前端的其他字段
}

[HttpPost]
public IActionResult SaveBooking([FromBody] BookingViewModel model)
{
    if (ModelState.IsValid)
    {
        // 这里写保存数据的逻辑
        return Json(new { success = true, message = "保存成功" });
    }
    return Json(new { success = false, message = "数据格式错误" });
}

4. 确保页面已引入jQuery #

因为我们用的是$.ajax方法，所以必须确保页面已经引入了jQuery库。可以在页面的<head>或者CustomScripts区域添加引入代码（建议用项目本地的jQuery文件）：

<script src="~/lib/jquery/jquery.min.js"></script>

按照上面的步骤排查，应该就能解决Ajax提交后跳转页面的问题啦！

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