求助：下拉框选择时在JSP中通过AJAX调用SQL查询获取数据

我来帮你梳理这段代码的问题，并且给出完整的实现方案，让你能通过下拉框选择选项后，正确查询对应的数据表记录：

一、前端AJAX代码优化 #

你的原代码存在几个小问题，比如变量作用域、DOM重复选择、缺少错误处理等，下面是修正后的版本：

$(document).ready(function() {
  // 用const声明变量，避免全局污染
  const $leaveType = $('.leavetype');
  
  $leaveType.change(function() {
    // 直接用$(this)获取当前触发事件的下拉框值，更高效
    const selectedValue = $(this).val();
    
    $.ajax({
      type: "POST",
      url: "applicationformuser.jsp",
      data: { leavetype: selectedValue },
      // 指定返回类型为JSON，方便直接处理后端数据
      dataType: "json",
      success: function(response) {
        // 后端返回成功时，渲染数据到页面
        if (response.success) {
          console.log("查询到的记录：", response.records);
          // 示例：把记录渲染成表格，插入到页面id为result的容器中
          let tableHtml = "<table border='1'><tr>";
          // 先渲染表头（从第一条记录的键名获取）
          if (response.records.length > 0) {
            Object.keys(response.records[0]).forEach(key => {
              tableHtml += `<th>${key}</th>`;
            });
          }
          tableHtml += "</tr>";
          // 渲染每一行数据
          response.records.forEach(record => {
            tableHtml += "<tr>";
            Object.values(record).forEach(value => {
              tableHtml += `<td>${value}</td>`;
            });
            tableHtml += "</tr>";
          });
          tableHtml += "</table>";
          $("#result").html(tableHtml);
        } else {
          alert("查询失败：" + response.message);
        }
      },
      error: function(xhr, status, error) {
        // 处理AJAX请求失败的情况，方便调试
        alert("请求出错：" + error);
        console.log("错误详情：", xhr);
      }
    });
  });
});

另外要确保完整引入jQuery，在你的AJAX代码之前添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

二、后端JSP处理逻辑（applicationformuser.jsp） #

这段JSP需要负责接收前端传的leavetype参数，执行SQL查询，并把结果转成JSON返回给前端：

<%@ page import="java.sql.*, com.google.gson.Gson" %>
<%
// 设置响应为JSON格式，编码为UTF-8
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

// 数据库连接参数（实际项目建议放到配置文件里，不要硬编码）
String dbUrl = "jdbc:mysql://localhost:3306/你的数据库名";
String dbUser = "你的数据库用户名";
String dbPassword = "你的数据库密码";

String leaveType = request.getParameter("leavetype");
java.util.Map<String, Object> result = new java.util.HashMap<>();

Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

try {
  // 加载MySQL驱动
  Class.forName("com.mysql.cj.jdbc.Driver");
  conn = DriverManager.getConnection(dbUrl, dbUser, dbPassword);
  
  // 白名单校验请假类型，避免SQL注入
  String tableName = "";
  switch(leaveType) {
    case "CL":
      tableName = "cl_table"; // 对应CL的表名
      break;
    case "EL":
      tableName = "el_table"; // 对应EL的表名
      break;
    // 可以继续添加其他请假类型的映射
    default:
      result.put("success", false);
      result.put("message", "无效的请假类型");
      out.print(new Gson().toJson(result));
      return;
  }
  
  // 执行查询，用PreparedStatement防止SQL注入
  String sql = "SELECT * FROM " + tableName;
  pstmt = conn.prepareStatement(sql);
  rs = pstmt.executeQuery();
  
  // 把ResultSet转换为可序列化的List<Map>
  java.util.List<java.util.Map<String, Object>> records = new java.util.ArrayList<>();
  ResultSetMetaData metaData = rs.getMetaData();
  int columnCount = metaData.getColumnCount();
  
  while(rs.next()) {
    java.util.Map<String, Object> record = new java.util.HashMap<>();
    for(int i=1; i<=columnCount; i++) {
      record.put(metaData.getColumnName(i), rs.getObject(i));
    }
    records.add(record);
  }
  
  // 设置成功返回结果
  result.put("success", true);
  result.put("records", records);
  
} catch (Exception e) {
  e.printStackTrace();
  result.put("success", false);
  result.put("message", "查询出错：" + e.getMessage());
} finally {
  // 关闭数据库资源，避免泄漏
  try { if(rs != null) rs.close(); } catch(Exception e) {}
  try { if(pstmt != null) pstmt.close(); } catch(Exception e) {}
  try { if(conn != null) conn.close(); } catch(Exception e) {}
}

// 输出JSON结果
out.print(new Gson().toJson(result));
%>

三、关键注意事项 #

• SQL注入防护：一定要用PreparedStatement，并且通过白名单（switch判断）限制表名，绝对不能直接把用户输入拼接到SQL语句中
• 依赖准备：后端需要引入Gson库（用于Java对象转JSON），把Gson的jar包放到项目的WEB-INF/lib目录下
• 页面容器：前端页面需要添加一个用于展示结果的容器，比如<div id="result"></div>
• 调试技巧：可以通过浏览器的开发者工具（Network标签）查看AJAX请求的参数和后端返回的结果，方便排查问题

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