Ajax是一種用于在網(wǎng)頁(yè)中進(jìn)行異步數(shù)據(jù)交互的技術(shù)，能夠提高用戶(hù)體驗(yàn)和頁(yè)面性能。在JavaWeb開(kāi)發(fā)中，我們常常需要實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)中數(shù)據(jù)的增刪改查操作。本文將通過(guò)使用Ajax來(lái)實(shí)現(xiàn)從JSP頁(yè)面中刪除數(shù)據(jù)庫(kù)中的數(shù)據(jù)，來(lái)介紹該技術(shù)的應(yīng)用。
假設(shè)我們有一個(gè)包含學(xué)生信息的數(shù)據(jù)庫(kù)表，其中包含學(xué)生的姓名、年齡和所在班級(jí)等信息。現(xiàn)在我們需要在JSP頁(yè)面中展示這些學(xué)生的數(shù)據(jù)，并提供刪除功能，即通過(guò)點(diǎn)擊刪除按鈕來(lái)從數(shù)據(jù)庫(kù)中刪除選定的學(xué)生記錄。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>學(xué)生信息列表</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>班級(jí)</th>
<th>操作</th>
</tr>
<%
// 獲取學(xué)生信息列表的代碼
// ...
// 遍歷學(xué)生信息列表，生成表格行并輸出到頁(yè)面中
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() {
// 綁定刪除按鈕的點(diǎn)擊事件
$(".delete-btn").click(function() {
var studentId = $(this).data("id");
// 發(fā)送Ajax請(qǐng)求，調(diào)用后臺(tái)刪除學(xué)生信息的接口
$.ajax({
url: "deleteStudent.jsp",
type: "POST",
data: {id: studentId},
success: function(response) {
// 刪除成功后，刷新頁(yè)面或移除該行數(shù)據(jù)等操作
// ...
},
error: function() {
alert("刪除失敗");
}
});
});
});
</script>
</body>
</html>在上述代碼中，我們首先通過(guò)JSP腳本來(lái)獲取學(xué)生信息列表，并使用循環(huán)將每個(gè)學(xué)生的信息輸出到表格中。每個(gè)學(xué)生信息的最后一列是一個(gè)刪除按鈕，它的data-id屬性值設(shè)置為對(duì)應(yīng)學(xué)生的ID，這樣在點(diǎn)擊按鈕時(shí)能夠通過(guò)JavaScript獲取到該學(xué)生的ID。
然后，通過(guò)jQuery選擇器綁定了刪除按鈕的點(diǎn)擊事件。當(dāng)點(diǎn)擊刪除按鈕時(shí)，通過(guò)jQuery的data()方法獲取到該學(xué)生的ID，并傳遞給后臺(tái)的刪除接口。
后臺(tái)的刪除接口在deleteStudent.jsp文件中實(shí)現(xiàn)，在這個(gè)JSP中，我們可以通過(guò)request.getParameter()方法獲取到傳遞過(guò)來(lái)的學(xué)生ID，并根據(jù)ID執(zhí)行刪除數(shù)據(jù)庫(kù)中對(duì)應(yīng)的學(xué)生記錄的代碼。
<%@ 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 {
// 獲取數(shù)據(jù)庫(kù)連接
// 方式一：使用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();
// 創(chuàng)建Statement對(duì)象
Statement statement = connection.createStatement();
// 執(zhí)行刪除語(yǔ)句
String sql = "DELETE FROM student WHERE id = " + studentId;
statement.executeUpdate(sql);
// 關(guān)閉Statement和連接
statement.close();
connection.close();
// 返回刪除成功的響應(yīng)，通知前端
response.getWriter().write("刪除成功");
} catch (Exception e) {
e.printStackTrace();
// 返回刪除失敗的響應(yīng)，通知前端
response.getWriter().write("刪除失敗");
}
%>在deleteStudent.jsp中，我們首先獲取前端傳遞過(guò)來(lái)的學(xué)生ID，并將其轉(zhuǎn)換為整數(shù)型。然后根據(jù)獲取數(shù)據(jù)庫(kù)連接的方式，使用DriverManager或者DataSource獲取一個(gè)數(shù)據(jù)庫(kù)連接對(duì)象。
然后，創(chuàng)建一個(gè)Statement對(duì)象，并執(zhí)行刪除操作的SQL語(yǔ)句，即DELETE語(yǔ)句。執(zhí)行完畢后，記得關(guān)閉Statement對(duì)象和數(shù)據(jù)庫(kù)連接，釋放資源。
最后，通過(guò)response.getWriter().write()方法向前端返回刪除操作的結(jié)果。如果刪除成功，返回"刪除成功"；如果刪除失敗，返回"刪除失敗"。
通過(guò)上述的代碼示例，我們實(shí)現(xiàn)了通過(guò)Ajax在JSP頁(yè)面中刪除數(shù)據(jù)庫(kù)中的數(shù)據(jù)。這樣，用戶(hù)在頁(yè)面中點(diǎn)擊刪除按鈕時(shí)，不會(huì)觸發(fā)頁(yè)面的刷新，而是通過(guò)Ajax請(qǐng)求來(lái)與后臺(tái)交互并刪除數(shù)據(jù)，從而提高了用戶(hù)體驗(yàn)和頁(yè)面性能。