Tomcat 10下通过JavaScript接收并处理Servlet返回的JSON响应

一、修改前端JS，改用AJAX提交表单 #

默认表单提交会跳转页面，要实现异步接收JSON，需阻止默认跳转行为，用AJAX发送请求。以下是两种实现方式：

1. 原生XMLHttpRequest实现 #

假设你的表单HTML结构如下：

<form id="submitForm" action="/SI/standar-Servlet" method="post">
  <!-- 表单字段示例 -->
  <input type="text" name="username" placeholder="输入用户名">
  <button type="submit">提交</button>
</form>
<div id="result"></div>
<div id="errorMsg"></div>

对应的JS代码：

document.getElementById('submitForm').addEventListener('submit', function(e) {
  // 阻止表单默认跳转
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  // 初始化AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open(this.method, this.action, true);
  // 告诉服务器我们期望接收JSON格式
  xhr.setRequestHeader('Accept', 'application/json');
  
  // 请求成功回调
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 解析JSON响应
      const resData = JSON.parse(xhr.responseText);
      // 根据业务逻辑处理数据
      if (resData.success) {
        document.getElementById('result').textContent = `操作成功：${resData.message}`;
        document.getElementById('errorMsg').textContent = '';
      } else {
        document.getElementById('errorMsg').textContent = `操作失败：${resData.error}`;
        document.getElementById('result').textContent = '';
      }
    } else {
      document.getElementById('errorMsg').textContent = `请求失败，状态码：${xhr.status}`;
    }
  };
  
  // 请求错误回调
  xhr.onerror = function() {
    document.getElementById('errorMsg').textContent = '网络请求异常，请重试';
  };
  
  // 发送请求
  xhr.send(formData);
});

2. Fetch API实现（更简洁） #

document.getElementById('submitForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  
  try {
    const response = await fetch(this.action, {
      method: this.method,
      body: formData,
      headers: {
        'Accept': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    
    const resData = await response.json();
    // 处理响应数据
    if (resData.success) {
      document.getElementById('result').textContent = resData.message;
      document.getElementById('errorMsg').textContent = '';
    } else {
      document.getElementById('errorMsg').textContent = resData.error;
      document.getElementById('result').textContent = '';
    }
  } catch (err) {
    document.getElementById('errorMsg').textContent = err.message;
  }
});

二、确保Servlet正确输出JSON响应 #

检查你的Servlet代码，必须设置正确的响应头并输出合法JSON：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 设置响应类型为JSON，编码UTF-8
  response.setContentType("application/json");
  response.setCharacterEncoding("UTF-8");
  
  // 构造JSON响应（以org.json包为例）
  JSONObject jsonRes = new JSONObject();
  // 模拟业务逻辑判断
  String username = request.getParameter("username");
  if (username != null && !username.trim().isEmpty()) {
    jsonRes.put("success", true);
    jsonRes.put("message", "用户" + username + "提交成功");
  } else {
    jsonRes.put("success", false);
    jsonRes.put("error", "用户名不能为空");
  }
  
  // 输出JSON到响应流
  PrintWriter out = response.getWriter();
  out.print(jsonRes.toString());
  out.flush();
}

注：如果使用Java EE的标准JSON API（javax.json），需调整构造JSON的代码逻辑，核心是确保输出的是合法JSON字符串

三、验证web.xml配置 #

确保Servlet的映射路径和表单action完全匹配：

<servlet>
  <servlet-name>StandarServlet</servlet-name>
  <servlet-class>com.yourpackage.StandarServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>StandarServlet</servlet-name>
  <url-pattern>/SI/standar-Servlet</url-pattern>
</servlet-mapping>

四、调试要点 #

1. 打开浏览器开发者工具（F12），切换到Network标签：
   • 确认请求URL与Servlet映射路径一致
   • 检查Response Headers的Content-Type是否为application/json;charset=UTF-8
   • 查看Response Body是否为合法JSON格式
2. 若出现跨域问题（同域名场景一般不会），可在Servlet中添加CORS响应头：

   response.setHeader("Access-Control-Allow-Origin", "你的前端域名"); // 生产环境避免用*
   

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