如何通过jQuery正确调用Servlet的Ajax？请求成功返回整页问题求助

阿华AIGC实验室

2026-5-20

解决Ajax请求时Servlet返回整页HTML而非跳转的问题

我之前也踩过一模一样的坑！问题核心在于Ajax的异步特性和Servlet跳转逻辑的冲突，咱们一步步捋清楚：

为什么会返回整页HTML？

Ajax是用来在不刷新整个页面的情况下和服务器异步交换数据的。当你的Servlet登录成功后调用forward或者sendRedirect时，浏览器并不会执行跳转——因为这是Ajax请求，浏览器会把跳转目标页面的全部HTML代码作为响应内容返回给Ajax的回调函数，而不是真的跳转到目标页面。失败时符合预期，大概率是因为失败场景下Servlet只返回了简单的错误文本，没有触发跳转逻辑。

两种解决方案，按需选择：

方案1：如果不需要异步处理，直接用普通表单提交

如果你的需求只是「登录成功跳转到管理员主页，失败显示错误」，其实完全没必要用Ajax，原生表单提交更简单直接：

<form action="LoginServlet" method="POST">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

Servlet代码可以保留原来的跳转逻辑，此时跳转能正常生效：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  String username = request.getParameter("username");
  String password = request.getParameter("password");
  
  if (isValidAdmin(username, password)) {
    // 成功跳转到管理员主页
    response.sendRedirect(request.getContextPath() + "/adminHome.jsp");
  } else {
    // 失败转发回登录页并携带错误信息
    request.setAttribute("errorMsg", "用户名或密码错误");
    request.getRequestDispatcher("/login.jsp").forward(request, response);
  }
}

方案2：必须用Ajax的话，让Servlet返回状态信息，前端手动跳转

如果因为需要加载动画、异步验证等场景必须保留Ajax，那我们要改成「Servlet返回状态标记，前端JS判断后手动跳转」的模式：

第一步：修改前端JQuery代码

让Ajax接收JSON格式的响应，根据返回的状态决定跳转或显示错误：

$("#loginBtn").click(function() {
  $.ajax({
    url: "LoginServlet",
    type: "POST",
    data: $("#loginForm").serialize(),
    dataType: "json", // 指定接收JSON格式
    success: function(data) {
      if (data.success) {
        // 手动跳转到管理员主页
        window.location.href = data.redirectUrl;
      } else {
        // 把错误信息渲染到页面上
        $("#errorMsg").text(data.message);
      }
    },
    error: function(xhr) {
      $("#errorMsg").text("请求出错，请稍后重试");
    }
  });
});

对应的HTML（用按钮触发Ajax，阻止表单默认提交）：

<form id="loginForm">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="button" id="loginBtn">登录</button>
  <div id="errorMsg" style="color: red; margin-top: 8px;"></div>
</form>

第二步：修改Servlet代码，返回JSON响应

这里用Gson库序列化JSON（需要先引入Gson依赖，比如Maven的<dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.10.1</version></dependency>）：

import com.google.gson.Gson;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置响应为JSON格式
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        Gson gson = new Gson();
        HashMap<String, Object> responseData = new HashMap<>();

        // 替换成你的管理员验证逻辑
        if ("admin".equals(username) && "admin123".equals(password)) {
            responseData.put("success", true);
            responseData.put("redirectUrl", request.getContextPath() + "/adminHome.jsp");
        } else {
            responseData.put("success", false);
            responseData.put("message", "用户名或密码错误");
        }

        // 把JSON数据写入响应
        response.getWriter().write(gson.toJson(responseData));
    }
}