使用AJAX将点击链接的变量从jQuery传递到Servlet失败求助

我现在遇到一个问题：通过jQuery能成功获取到链接的学生编号（alert能正常显示），但把这个数值通过AJAX传递到Servlet时，Servlet里用request.getParameter("studNo")拿到的是null。相关代码如下：

Main.jsp 代码 #

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<div id ="data">
<table border="1">
<tr>
<th>Case Number</th>
<th>Student Number</th>
<th>Surname</th>
<th>Firstname</th>
<th>Middlename</th>
<th>Date</th>
<th>Violation</th>
</tr>
<% ResultSet rs = (ResultSet)request.getAttribute("resultset"); String str = ""; while(rs.next()) { str += "<tr><td>"+rs.getString(1)+"</td><td><a href = \"viewStudentRecords\" class = \"data1\">"+rs.getString(2)+"</a></td><td>"+rs.getString(3)+"</td><td>"+rs.getString(4)+"</td><td>"+rs.getString(5)+"</td><td>"+rs.getString(6)+"</td><td>"+rs.getString(7)+"</td>"; } out.println(str);%>
</table>
</div>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$(function() {
alert("hello");
});
$('.data1').click(function(link) {
var number = $(this).text();
alert(number);
$.ajax({
type: "GET",
url: "/viewStudentRecords",
data: {studNo:number},
success: function() {
console.log("Success!!");
},
});
});
});
</script>
</body>

viewStudentRecords.java 代码 #

protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain;charset=UTF-8");
PrintWriter out = response.getWriter();
String studNo = request.getParameter("studNo");
out.println(studNo);
}

问题现象 #

点击链接时，alert(number)能正常显示学生编号，但Servlet返回的是null。我知道用<% %>脚本不推荐，但目前还不熟悉JSTL，希望得到针对性的帮助。

解决方案：阻止链接的默认跳转行为 #

问题的核心是：当你点击<a>标签时，浏览器会优先执行它的默认跳转行为，这会直接中断你的AJAX请求，导致参数根本没机会传递到Servlet。

你只需要在点击事件里添加event.preventDefault()来阻止默认跳转，让AJAX请求正常完成。修改后的jQuery代码如下：

$(document).ready(function() {
    $('.data1').click(function(event) {
        // 阻止链接的默认跳转行为，让AJAX请求正常执行
        event.preventDefault();
        
        var number = $.trim($(this).text()); // 顺便去除文本前后可能存在的空格
        alert(number);
        
        $.ajax({
            type: "GET",
            url: "/viewStudentRecords",
            data: {studNo: number},
            success: function(response) {
                console.log("Success!!");
                // 可以在这里打印Servlet返回的结果，确认是否拿到正确值
                console.log("Servlet返回的学生编号：" + response);
            },
            error: function(xhr) {
                console.log("请求出错：" + xhr.statusText);
            }
        });
    });
});

额外检查点 #

1. Servlet映射路径是否匹配：确保url: "/viewStudentRecords"和你的Servlet映射路径完全一致。如果你的Web应用有上下文路径（比如部署后访问路径是http://localhost:8080/your-app/），那URL需要改成"/your-app/viewStudentRecords"。
2. 参数格式问题：如果学生编号包含特殊字符，$.trim()能帮你避免空格导致的参数异常，确保传递的是干净的数值。

这样修改后，AJAX请求就能正常把studNo参数传递给Servlet，你就能拿到正确的数值用于后续的SQL语句了。

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