MVC中如何通过Ajax实现页面跳转？避免使用查询字符串

嘿，我帮你梳理下问题所在，然后给你可行的代码示例～

首先，你的Ajax代码能调用控制器但没返回预期结果，大概率是这几个原因：

• 你设置了dataType: "json"，但如果控制器返回的是视图或非JSON内容，jQuery会判定请求失败，不会进入success回调；
• 手动拼接的JSON字符串虽然格式看似没问题，但直接传JS对象会更稳妥，避免格式错误；
• 最关键的一点：Ajax本身是异步请求，不会自动帮你跳转页面——你原来用window.location是直接跳转，而Ajax只是发送请求，跳转逻辑得你自己在回调里手动实现。

下面是修正后的完整方案：

方案1：控制器返回跳转URL，前端接收后跳转 #

前端JavaScript代码 #

// 先获取输入框的值，这里假设输入框id是input1和input2
const param1 = $("#input1").val();
const param2 = $("#input2").val();

$.ajax({
    type: "POST",
    url: "/MyController/MyAction",
    // 直接传JS对象，jQuery会自动处理成合适的格式
    data: { Param1: param1, Param2: param2 },
    // 如果控制器接收JSON格式参数，保留这个配置；如果是表单数据可以省略
    contentType: "application/json;charset=utf-8",
    dataType: "json", // 对应控制器返回的JSON格式数据
    success: function (response) {
        // 拿到控制器返回的跳转地址，执行页面跳转
        window.location.href = response.redirectUrl;
    },
    // 新增错误回调，方便排查问题
    error: function (xhr, status, error) {
        console.error("请求出错：", error);
    }
});

后端控制器代码（以ASP.NET MVC为例） #

[HttpPost]
public JsonResult MyAction(string Param1, string Param2)
{
    // 在这里处理你的业务逻辑，比如验证参数、保存数据等
    // 处理完成后，返回要跳转的目标URL
    return Json(new { redirectUrl = "/TargetPage/Index" });
}

方案2：控制器返回视图，前端替换页面或跳转 #

如果你希望控制器直接返回视图内容，也可以这样实现：

前端代码 #

const param1 = $("#input1").val();
const param2 = $("#input2").val();

$.ajax({
    type: "POST",
    url: "/MyController/MyAction",
    data: { Param1: param1, Param2: param2 },
    dataType: "html", // 对应控制器返回的视图HTML
    success: function (html) {
        // 选项1：直接用返回的视图替换当前页面内容
        $("body").html(html);
        
        // 选项2：如果还是需要跳转到新页面，可先暂存参数再跳转
        sessionStorage.setItem("param1", param1);
        sessionStorage.setItem("param2", param2);
        window.location.href = "/TargetPage/Index";
    },
    error: function (xhr, status, error) {
        console.error("请求出错：", error);
    }
});

后端控制器代码 #

[HttpPost]
public ActionResult MyAction(string Param1, string Param2)
{
    // 处理业务逻辑
    // 返回目标视图
    return View("TargetView");
}

额外注意事项 #

• 如果使用contentType: "application/json"，在ASP.NET Core中后端需要用[FromBody]特性接收参数，比如：

  // 先定义接收参数的模型类
  public class MyModel {
      public string Param1 { get; set; }
      public string Param2 { get; set; }
  }
  
  [HttpPost]
  public JsonResult MyAction([FromBody] MyModel model)
  {
      return Json(new { redirectUrl = "/TargetPage/Index" });
  }
  

  对应的前端需要把数据转成JSON字符串：

  data: JSON.stringify({ Param1: param1, Param2: param2 }),
  

• 一定要加上error回调，能帮你快速定位请求失败的原因，比如参数不匹配、控制器内部报错等。

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