本文將介紹如何使用Ajax技術刪除數據后，通過刷新局部數據來實現頁面的即時更新。通過這種方式，可以提升用戶體驗，避免整體頁面的刷新導致數據丟失或頁面跳轉。

舉個例子，假設我們有一個簡單的待辦事項列表。每行都有一個刪除按鈕，當用戶點擊刪除按鈕時，應該發送一個Ajax請求來刪除該事項，并且更新列表以移除該項。

<ul id="todo-list">
<li>吃晚飯 <button onclick="deleteTodo(1)">刪除</button></li>
<li>寫報告 <button onclick="deleteTodo(2)">刪除</button></li>
<li>鍛煉 <button onclick="deleteTodo(3)">刪除</button></li>
</ul>

在上面的例子中，我們為每個待辦事項的刪除按鈕添加了一個onclick事件，當用戶點擊刪除按鈕時，會調用deleteTodo函數，并將待刪除事項的ID作為參數傳遞給該函數。

function deleteTodo(id) {
// 發送Ajax請求刪除該事項
$.ajax({
method: "POST",
url: "/todos/delete",
data: { id: id },
success: function(response) {
// 刪除成功后刷新局部數據
var todoList = document.getElementById("todo-list");
var listItem = document.getElementById("todo-" + id);
todoList.removeChild(listItem);
}
});
}

上述代碼中，deleteTodo函數先發送一個Ajax請求到服務器端，請求刪除指定ID的待辦事項。當刪除成功后，成功回調函數會被調用，其中會找到需要刷新的列表項，并將其從DOM中移除。

這樣，用戶點擊刪除按鈕后，只會刪除該項而不會刷新整個頁面，從而提升用戶體驗。

另一個常見的例子是評論列表的刪除功能。假設我們有一個動態加載的評論列表，每個評論都有一個刪除按鈕。當用戶點擊刪除按鈕時，我們使用Ajax刪除該評論，并更新列表以移除已刪除的評論。

<ul id="comment-list">
<li id="comment-1">
<p>這個產品真棒！</p>
<button onclick="deleteComment(1)">刪除</button>
</li>
<li id="comment-2">
<p>不推薦購買。</p>
<button onclick="deleteComment(2)">刪除</button>
</li>
<li id="comment-3">
<p>太貴了！</p>
<button onclick="deleteComment(3)">刪除</button>
</li>
</ul>

在上述例子中，每個評論的刪除按鈕都調用了deleteComment函數，并將要刪除的評論ID作為參數傳遞給該函數。

function deleteComment(id) {
// 發送Ajax請求刪除該評論
$.ajax({
method: "POST",
url: "/comments/delete",
data: { id: id },
success: function(response) {
// 刪除成功后刷新局部數據
var commentList = document.getElementById("comment-list");
var commentItem = document.getElementById("comment-" + id);
commentList.removeChild(commentItem);
}
});
}

上述代碼與第一個例子類似，當刪除成功后，我們找到需要刷新的評論項，并將其從DOM中移除。

通過以上兩個例子，我們可以看到如何使用Ajax刪除數據后，通過刷新局部數據來實現頁面的即時更新。這種方式不僅提升了用戶體驗，還避免了整體頁面的刷新，從而避免了數據丟失或頁面跳轉的問題。

需要注意的是，在實際應用中，我們可能還需要處理一些錯誤情況，比如刪除失敗時的處理以及錯誤提示等。但基本的實現思路與上述例子相似。