Ajax是一種用于在網頁中進行異步數據交互的技術，能夠提高用戶體驗和頁面性能。在JavaWeb開發中，我們常常需要實現對數據庫中數據的增刪改查操作。本文將通過使用Ajax來實現從JSP頁面中刪除數據庫中的數據，來介紹該技術的應用。
假設我們有一個包含學生信息的數據庫表，其中包含學生的姓名、年齡和所在班級等信息。現在我們需要在JSP頁面中展示這些學生的數據，并提供刪除功能，即通過點擊刪除按鈕來從數據庫中刪除選定的學生記錄。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>學生信息列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>班級</th>
<th>操作</th>
</tr>
<%
// 獲取學生信息列表的代碼
// ...
// 遍歷學生信息列表，生成表格行并輸出到頁面中
for (Student student : studentList) {
%>
<tr>
<td><%= student.getName() %></td>
<td><%= student.getAge() %></td>
<td><%= student.getClass() %></td>
<td>
<button class="delete-btn" data-id=<%= student.getId() %>>刪除</button>
</td>
</tr>
<%
}
%>
</table>
<script>
$(function() {
// 綁定刪除按鈕的點擊事件
$(".delete-btn").click(function() {
var studentId = $(this).data("id");
// 發送Ajax請求，調用后臺刪除學生信息的接口
$.ajax({
url: "deleteStudent.jsp",
type: "POST",
data: {id: studentId},
success: function(response) {
// 刪除成功后，刷新頁面或移除該行數據等操作
// ...
},
error: function() {
alert("刪除失敗");
}
});
});
});
</script>
</body>
</html>在上述代碼中，我們首先通過JSP腳本來獲取學生信息列表，并使用循環將每個學生的信息輸出到表格中。每個學生信息的最后一列是一個刪除按鈕，它的data-id屬性值設置為對應學生的ID，這樣在點擊按鈕時能夠通過JavaScript獲取到該學生的ID。
然后，通過jQuery選擇器綁定了刪除按鈕的點擊事件。當點擊刪除按鈕時，通過jQuery的data()方法獲取到該學生的ID，并傳遞給后臺的刪除接口。
后臺的刪除接口在deleteStudent.jsp文件中實現，在這個JSP中，我們可以通過request.getParameter()方法獲取到傳遞過來的學生ID，并根據ID執行刪除數據庫中對應的學生記錄的代碼。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.DriverManager"%>
<%@ page import="java.sql.Statement"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.sql.DataSource"%>
<%
int studentId = Integer.parseInt(request.getParameter("id"));
try {
// 獲取數據庫連接
// 方式一：使用DriverManager獲取連接
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "password");
// 方式二：使用DataSource獲取連接（推薦使用）
// Context ctx = new InitialContext();
// DataSource ds = (DataSource) ctx.lookup("java:/comp/env/jdbc/mydb");
// Connection connection = ds.getConnection();
// 創建Statement對象
Statement statement = connection.createStatement();
// 執行刪除語句
String sql = "DELETE FROM student WHERE id = " + studentId;
statement.executeUpdate(sql);
// 關閉Statement和連接
statement.close();
connection.close();
// 返回刪除成功的響應，通知前端
response.getWriter().write("刪除成功");
} catch (Exception e) {
e.printStackTrace();
// 返回刪除失敗的響應，通知前端
response.getWriter().write("刪除失敗");
}
%>在deleteStudent.jsp中，我們首先獲取前端傳遞過來的學生ID，并將其轉換為整數型。然后根據獲取數據庫連接的方式，使用DriverManager或者DataSource獲取一個數據庫連接對象。
然后，創建一個Statement對象，并執行刪除操作的SQL語句，即DELETE語句。執行完畢后，記得關閉Statement對象和數據庫連接，釋放資源。
最后，通過response.getWriter().write()方法向前端返回刪除操作的結果。如果刪除成功，返回"刪除成功"；如果刪除失敗，返回"刪除失敗"。
通過上述的代碼示例，我們實現了通過Ajax在JSP頁面中刪除數據庫中的數據。這樣，用戶在頁面中點擊刪除按鈕時，不會觸發頁面的刷新，而是通過Ajax請求來與后臺交互并刪除數據，從而提高了用戶體驗和頁面性能。