如何在 AJAX 请求中正确实现前端页面跳转

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何在 AJAX 请求中正确实现前端页面跳转 》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

AJAX 请求无法直接触发浏览器重定向，res.redirect() 仅作用于 HTTP 响应本身，返回的 HTML 内容会被 JavaScript 接收并解析，导致 Unexpected token '<' 错误；正确做法是服务端返回跳转地址，由前端通过 window.location.replace() 主动跳转。

AJAX 请求无法直接触发浏览器重定向，`res.redirect()` 仅作用于 HTTP 响应本身，返回的 HTML 内容会被 JavaScript 接收并解析，导致 `Unexpected token '

在基于 Fetch API 的前后端交互中，一个常见误区是期望后端调用 res.redirect() 能像传统表单提交一样直接让浏览器跳转。实际上，fetch 发起的是异步 AJAX 请求，整个响应生命周期由 JavaScript 控制：即使服务端执行了 res.redirect()，Express 也只是向客户端（即 JS 代码）返回一个带有 302 状态码和 Location 头的响应；而 response.json() 方法会尝试将响应体解析为 JSON —— 此时若重定向目标是 HTML 文件（如 /webpages/codingspace/coding.html），响应体就是完整的 HTML 文本（以 < 开头），自然抛出 SyntaxError: Unexpected token '<'。

✅ 正确解决方案是分离职责：

• 后端不再使用 res.redirect()，而是统一返回结构化 JSON 响应，包含业务状态与可选跳转路径；
• 前端根据响应内容判断逻辑，并主动调用浏览器 API 完成跳转。

以下是修正后的完整代码示例：

服务端（Node.js / Express）：

app.get('/login', (req, res) => {
    const { username, password } = req.query;
    const sql = "SELECT * FROM authdetails WHERE username = ? AND password = ?";

    db.query(sql, [username, password], (err, results) => {
        if (err) {
            console.error("Database error:", err);
            return res.status(500).json({ error: "Database error" });
        }

        if (results.length > 0) {
            // ✅ 不再使用 res.redirect()
            res.json({ 
                success: true, 
                message: "Login successful", 
                url: "/webpages/codingspace/coding.html" 
            });
        } else {
            res.json({ 
                success: false, 
                message: "Invalid username or password" 
            });
        }
    });
});

客户端（JavaScript）：

document.addEventListener("DOMContentLoaded", function () {
    const loginForm = document.getElementById("login-field");

    loginForm.addEventListener("submit", function (event) {
        event.preventDefault();

        const username = document.getElementById("login-username").value.trim();
        const password = document.getElementById("login-password").value.trim();

        fetch(`/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`)
            .then(response => {
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    alert("Login successful");
                    // ✅ 由前端主动跳转
                    window.location.replace(data.url);
                } else {
                    alert(data.message || "Login failed");
                }
                // 重置表单
                document.getElementById("login-username").value = "";
                document.getElementById("login-password").value = "";
            })
            .catch(error => {
                console.error("Login error:", error);
                alert("An error occurred. Please try again.");
            });
    });
});

⚠️ 注意事项：

• URL 编码：务必对 username 和 password 使用 encodeURIComponent()，避免特殊字符（如 @, /, &）破坏 URL 结构；
• 安全提示：本例使用 GET + 明文密码仅作演示，生产环境应改用 POST、HTTPS、哈希密码（如 bcrypt）、CSRF 防护及 Session/JWT 认证；
• 跳转方式选择：window.location.replace(url) 更推荐（不保留当前页到历史栈），避免用户点击「返回」回到登录页后重复提交；若需保留历史，可用 window.location.href = url；
• 错误处理增强：建议服务端统一返回 success: boolean 字段，前端优先校验该字段而非依赖 message 字符串匹配，提升健壮性。

通过这种前后端协同的设计，既保持了 AJAX 的灵活性，又实现了符合用户预期的页面导航体验。

终于介绍完啦！小伙伴们，这篇关于《如何在 AJAX 请求中正确实现前端页面跳转 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！