Spring Controller在Ajax GET请求后无法返回HTML页面问题咨询

首先，我猜你大概率踩了Ajax请求的核心特性误区——Ajax是异步发起的后台请求，默认不会触发浏览器的页面跳转或刷新。哪怕你的Spring Controller正确返回了视图（比如新页面的HTML），客户端也只是把这个响应内容拿到了，但不会自动替换当前页面，这就是你觉得“无法返回新页面”的根本原因。

下面给你两种针对性的解决思路：

思路1：放弃Ajax，用普通表单提交（最简单直接） #

如果你的需求只是提交促销码后跳转到新页面，完全没必要用Ajax。直接用HTML表单提交就行：

<!-- discount页面的表单 -->
<form action="/process-promo" method="get">
  <input type="text" name="promoCode" placeholder="输入促销码" id="promoInput">
  <button type="submit">提交验证</button>
</form>

对应的Spring Controller可以正常返回视图：

@GetMapping("/process-promo")
public String handlePromoCode(@RequestParam String promoCode, Model model) {
    // 这里写你的促销码处理逻辑，比如校验、计算折扣等
    model.addAttribute("discountInfo", yourProcessedData);
    return "discount-result"; // 返回新页面的视图名称
}

这样提交后浏览器会自动跳转到discount-result对应的页面，完全符合你的预期。

思路2：保留Ajax，手动处理页面跳转（适合需要先验证再跳转的场景） #

如果你必须用Ajax（比如要先在前端提示促销码是否有效，再决定是否跳转），那需要在Ajax的回调函数里手动触发跳转。

方式A：Controller返回跳转URL，前端跳转 #

Controller代码：

@GetMapping("/ajax-process-promo")
@ResponseBody
public String handleAjaxPromoCode(@RequestParam String promoCode) {
    // 处理促销码逻辑
    if (isValidPromo(promoCode)) {
        return "/discount-result"; // 返回要跳转的页面URL
    } else {
        return "invalid"; // 返回错误标识
    }
}

// 假设的促销码校验方法
private boolean isValidPromo(String code) {
    return "SAVE10".equals(code); // 示例校验逻辑
}

前端Ajax代码（用原生JS举例）：

function submitPromo() {
    const promoCode = document.getElementById("promoInput").value;
    fetch(`/ajax-process-promo?promoCode=${promoCode}`)
        .then(response => response.text())
        .then(data => {
            if (data === "invalid") {
                alert("促销码无效，请重新输入");
            } else {
                window.location.href = data; // 手动跳转到新页面
            }
        })
        .catch(error => {
            console.error("请求出错:", error);
            // 这里可以处理客户端的错误，比如网络问题、请求路径写错等
        });
}

方式B：Controller返回视图HTML，前端替换当前页面（不推荐） #

如果一定要让Controller返回视图内容，前端可以拿到后替换整个页面的HTML，但这种方式会丢失浏览器历史记录，体验不好：

fetch(`/ajax-process-promo?promoCode=${promoCode}`)
    .then(response => response.text())
    .then(html => {
        document.documentElement.innerHTML = html;
    })
    .catch(error => console.error(error));

另外，你提到客户端有错误，建议打开浏览器开发者工具（F12）：

• 看Console面板，能看到具体的JS错误信息，比如语法错误、请求路径拼写错误
• 看Network面板，可以查看Ajax请求的状态码、响应内容，确认Controller是否真的正确返回了数据

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