Ajax 是一種讓網頁與服務器之間進行異步通信的技術，它能夠在不需要刷新整個頁面的情況下，通過后臺的 Servlet 從數據庫中獲取數據，并將數據顯示在網頁上。下面我將通過舉例來說明如何使用 Ajax 在網頁中獲取 Servlet 數據庫的內容。
假設我們有一個學生管理系統，其中有一個學生列表頁面，需要通過 Ajax 來獲取數據庫中的學生信息并在頁面上展示。首先，我們需要創建一個 Servlet 類來處理請求，并連接數據庫獲取數據。下面是示例代碼：
在上面的代碼中，我們首先通過
接下來，我們需要在網頁中使用 Ajax 來調用 Servlet，并將返回的學生數據展示出來。以下是一個簡化的示例代碼：
在上面的代碼中，我們定義了一個
通過以上示例，我們可以看到，通過 Ajax 和 Servlet，我們可以實現在網頁上獲取數據庫中的數據，而不需要刷新整個頁面。這不僅能提升用戶體驗，還能減輕服務器的負載。
假設我們有一個學生管理系統，其中有一個學生列表頁面，需要通過 Ajax 來獲取數據庫中的學生信息并在頁面上展示。首先，我們需要創建一個 Servlet 類來處理請求，并連接數據庫獲取數據。下面是示例代碼：
java
@WebServlet("/student")
public class StudentServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json");
PrintWriter out = response.getWriter();
// 連接數據庫
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/students", "root", "password");
stmt = conn.createStatement();
rs = stmt.executeQuery("SELECT * FROM student");
// 將查詢結果轉換為 JSON 格式
JSONArray students = new JSONArray();
while (rs.next()) {
JSONObject student = new JSONObject();
student.put("id", rs.getInt("id"));
student.put("name", rs.getString("name"));
student.put("age", rs.getInt("age"));
students.put(student);
}
// 將 JSON 數據發送給前端
out.print(students.toString());
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}在上面的代碼中，我們首先通過
DriverManager建立與數據庫的連接，并使用executeQuery方法執行查詢語句。然后，我們通過一個while循環遍歷結果集，并將每一條記錄轉換為一個JSONObject對象，再將所有學生信息存放到一個JSONArray中。最后，我們通過PrintWriter將 JSON 數據發送給前端。接下來，我們需要在網頁中使用 Ajax 來調用 Servlet，并將返回的學生數據展示出來。以下是一個簡化的示例代碼：
javascript
<script>
function getStudents() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/student", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
// 在網頁上展示數據
var table = document.getElementById("student-table");
for(var i=0; i<students.length; i++) {
var row = table.insertRow(i+1);
var idCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var ageCell = row.insertCell(2);
idCell.innerHTML = students[i].id;
nameCell.innerHTML = students[i].name;
ageCell.innerHTML = students[i].age;
}
}
};
xhr.send();
}
</script>
<body onload="getStudents()">
<table id="student-table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
</body>在上面的代碼中，我們定義了一個
getStudents函數，并在網頁加載完成后調用該函數。在該函數中，我們使用XMLHttpRequest對象來發送 GET 請求到 Servlet，根據返回的學生數據動態地在網頁上創建表格，并將學生信息填充到表格中。通過以上示例，我們可以看到，通過 Ajax 和 Servlet，我們可以實現在網頁上獲取數據庫中的數據，而不需要刷新整個頁面。這不僅能提升用戶體驗，還能減輕服務器的負載。