AJAX（Asynchronous JavaScript and XML）是一種基于JavaScript和XML的技術，通過在后臺與服務器進行數據交換，實現頁面無刷新更新數據的功能。在Web開發中，經常使用AJAX來修改JSON數據，以實現動態更新頁面的需求。本文將介紹如何使用AJAX修改JSON數據，并給出相應的實例。

JSON（JavaScript Object Notation）是一種輕量級數據交換格式，易于閱讀和編寫。它由鍵值對組成，鍵和值之間使用冒號分隔，多個鍵值對之間使用逗號分隔，并使用大括號{}包圍。在前后端交互中，JSON常用于傳輸數據。

假設我們有一個簡單的任務清單網頁，其中包含多個任務，每個任務包含標題和描述。我們希望能夠使用AJAX修改任務的標題或描述，而不需要刷新整個頁面。首先，我們需要將任務數據保存為JSON格式。

let tasks = [
{
"id": 1,
"title": "完成作業",
"description": "完成數學作業"
},
{
"id": 2,
"title": "購物",
"description": "購買食材"
},
{
"id": 3,
"title": "洗衣服",
"description": "洗臟衣服"
}
];

接下來，我們需要使用AJAX來修改JSON數據。首先，我們要在網頁中添加一些HTML元素來顯示任務清單。

<div id="taskList"></div>

然后，我們使用JavaScript來通過AJAX獲取JSON數據并展示在頁面上。

let taskList = document.getElementById("taskList");
function displayTasks() {
// 使用AJAX獲取JSON數據
let xhr = new XMLHttpRequest();
xhr.open("GET", "/tasks", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let tasks = JSON.parse(xhr.responseText);
// 清空任務清單
taskList.innerHTML = "";
// 遍歷任務數組，創建HTML元素來展示任務
tasks.forEach(function(task) {
let taskElement = document.createElement("div");
taskElement.innerHTML = "標題：" + task.title + "
描述：" + task.description + "
";
taskList.appendChild(taskElement);
});
}
};
xhr.send();
}
displayTasks();

通過上述代碼，我們成功獲取并展示了任務清單中的所有任務。現在，我們來看一下如何使用AJAX修改JSON數據。

假設用戶想要修改一條任務的標題。我們可以在任務元素旁邊添加一個編輯按鈕，并通過點擊按鈕來觸發修改操作。

tasks.forEach(function(task) {
let taskElement = document.createElement("div");
taskElement.innerHTML = "標題：" + task.title + "
描述：" + task.description + "
";
// 創建編輯按鈕
let editButton = document.createElement("button");
editButton.innerHTML = "編輯";
editButton.onclick = function() {
editTask(task.id);
};
taskElement.appendChild(editButton);
taskList.appendChild(taskElement);
});

編輯按鈕綁定了一個名為editTask的函數，該函數接受任務的ID作為參數，并將其傳遞給服務器端進行處理。

function editTask(taskId) {
// 彈出對話框要求輸入新標題
let newTitle = prompt("請輸入新標題：");
// 驗證輸入是否為空
if (newTitle !== null && newTitle.trim() !== "") {
// 使用AJAX將新標題發送到服務器端
let xhr = new XMLHttpRequest();
xhr.open("PUT", "/tasks/" + taskId, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 修改成功，重新展示任務清單
displayTasks();
}
};
xhr.send(JSON.stringify({ title: newTitle }));
}
}

通過上述代碼，我們實現了通過點擊編輯按鈕修改任務標題的功能。當用戶點擊編輯按鈕時，彈出一個對話框要求用戶輸入新標題。然后，使用AJAX將新標題發送到服務器端進行處理，并在成功修改后重新展示任務清單。

綜上所述，我們可以通過AJAX修改JSON數據，實現動態更新頁面的需求。使用AJAX發送請求并獲取服務器返回的JSON數據，我們可以通過JavaScript將數據展示在頁面上。通過點擊按鈕，我們可以使用AJAX修改JSON數據，實現即時更新頁面的功能。