AJAX 是一種在前端和后端進行異步通信的技術，它通過無需重新加載整個頁面的方式，實現了對服務器的增刪改查操作。JSON 數據庫則是一種將數據存儲為 JSON 格式的數據庫。結合 AJAX 和 JSON 數據庫，我們可以快速地實現對數據的增刪改查操作。通過 AJAX 請求數據，并將數據以 JSON 格式發送給后端進行處理，可以輕松地更新數據，而無需重新加載整個頁面。

假設我們有一個學生信息管理系統，其中的學生信息保存在一個 JSON 數據庫中。我們可以通過 AJAX 請求獲取學生列表，向服務器發送學生信息以添加新的學生，或者將學生信息發送給服務器以更新學生的信息。同時，我們還可以通過 AJAX 請求將學生信息發送給服務器，以便刪除某個學生。通過這些操作，我們可以方便地管理學生信息，而無需刷新整個頁面。

首先，讓我們看一下如何通過 AJAX 獲取學生列表。我們可以使用 jQuery 的 AJAX 方法來發送一個 GET 請求，并將 URL 設置為指向服務器上的學生列表的 JSON 文件。當服務器響應時，我們將獲取到的 JSON 數據解析為 JavaScript 對象，并對其進行遍歷來展示學生列表。

$(() => {
$.ajax({
url: "students.json",
type: "GET",
dataType: "json",
success: (data) => {
let studentList = data.students;
studentList.forEach((student) => {
$("body").append("<p>" + student.name + "</p>");
});
},
error: (xhr, status, error) => {
console.log("Error: " + error);
}
});
});

上述代碼中，我們首先發送一個 GET 請求到students.json文件，并指定返回的數據類型為 JSON。當服務器成功響應時，我們將獲取到的學生列表保存在studentList變量中，并使用forEach方法遍歷每個學生的信息。在這個例子中，我們將學生的姓名展示在頁面上。

接下來，我們來看一下如何通過 AJAX 向服務器發送學生信息以添加新的學生。我們可以創建一個表單，讓用戶輸入學生的姓名和年齡，并通過 AJAX 發送一個 POST 請求將學生的信息傳遞給服務器。

$(() => {
$("form").submit((event) => {
event.preventDefault();
let name = $("#name").val();
let age = $("#age").val();
let student = {
name: name,
age: age
};
$.ajax({
url: "add-student.php",
type: "POST",
dataType: "json",
data: JSON.stringify(student),
success: (data) => {
console.log("Student added successfully");
},
error: (xhr, status, error) => {
console.log("Error: " + error);
}
});
});
});

在這個例子中，我們首先取消了表單提交的默認行為。接著，我們獲取用戶在輸入框中輸入的學生姓名和年齡，并將其保存在一個 JavaScript 對象中。之后，我們發送一個包含學生信息的 JSON 字符串的 POST 請求到add-student.php文件。當服務器成功響應時，我們在控制臺中輸出成功添加學生的信息。

最后，我們來看一下如何通過 AJAX 向服務器發送學生信息以更新學生的信息。假設我們有一個按鈕可以編輯學生的信息，用戶點擊按鈕后我們會獲取學生的信息，并將其回填到一個表單中。當用戶更新學生的信息后，我們可以通過 AJAX 發送一個 PUT 請求將更新后的學生信息傳遞給服務器。

$(() => {
// 獲取學生信息并回填表單
$("#edit-student-btn").click(() => {
$.ajax({
url: "get-student.php",
type: "GET",
dataType: "json",
success: (data) => {
let student = data.student;
$("#name").val(student.name);
$("#age").val(student.age);
},
error: (xhr, status, error) => {
console.log("Error: " + error);
}
});
});
// 更新學生信息
$("form").submit((event) => {
event.preventDefault();
let name = $("#name").val();
let age = $("#age").val();
let student = {
name: name,
age: age
};
$.ajax({
url: "update-student.php",
type: "PUT",
dataType: "json",
data: JSON.stringify(student),
success: (data) => {
console.log("Student updated successfully");
},
error: (xhr, status, error) => {
console.log("Error: " + error);
}
});
});
});

在這個例子中，我們首先給一個按鈕添加了點擊事件。當用戶點擊按鈕時，我們發送一個 GET 請求到get-student.php文件以獲取學生信息，并將學生的姓名和年齡回填到表單中。當用戶更新學生的信息后，我們捕獲表單的提交事件，獲取學生的姓名和年齡，并將其保存在一個 JavaScript 對象中。之后，我們發送一個包含學生信息的 JSON 字符串的 PUT 請求到update-student.php文件。當服務器成功響應時，我們在控制臺中輸出成功更新學生信息的信息。

通過以上的例子，我們可以看出使用 AJAX 和 JSON 數據庫可以方便地實現對數據的增刪改查操作。通過異步通信，我們可以快速地更新數據，而無需重新加載整個頁面。這大大提高了用戶的體驗，并簡化了前端和后端的開發。