在網頁開發中，經常會遇到刪除表單數據的需求。使用傳統的方法，通常需要刷新整個頁面才能完成刪除操作。然而，隨著Ajax（Asynchronous JavaScript and XML）技術的發展，我們可以在頁面不刷新的情況下，通過與服務器進行異步通信，實現刪除表單數據的功能。本文將介紹如何使用Ajax來刪除表單數據，并以具體的例子進行說明。

假設我們有一個包含多個表單數據的頁面，每個表單表示一個用戶的信息，其中包含姓名、年齡和地址。我們希望點擊刪除按鈕后，能夠刪除相應表單的數據并從頁面中移除這個表單。為了實現這個功能，我們首先需要為每個刪除按鈕添加一個事件監聽器，并在點擊按鈕時執行相應的刪除操作。

var deleteButtons = document.querySelectorAll('.delete-button');
for (var i = 0; i< deleteButtons.length; i++) {
deleteButtons[i].addEventListener('click', function(event) {
// 執行刪除操作
// 移除表單
});
}

在上述代碼中，我們使用了document.querySelectorAll()方法來選擇所有class為'delete-button'的元素，并為每個按鈕添加click事件監聽器。在事件監聽器中，我們可以使用Ajax來與服務器進行通信，刪除相應的表單數據。

var deleteButtons = document.querySelectorAll('.delete-button');
for (var i = 0; i< deleteButtons.length; i++) {
deleteButtons[i].addEventListener('click', function(event) {
var formId = this.getAttribute('data-form-id');
var request = new XMLHttpRequest();
// 創建異步請求
request.open('DELETE', '/forms/' + formId, true);
// 監聽請求狀態
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
// 刪除成功，移除相應表單
var form = document.getElementById(formId);
form.parentNode.removeChild(form);
}
};
// 發送請求
request.send();
});
}

在上述代碼中，我們首先獲取了每個刪除按鈕的data-form-id屬性，該屬性保存了相應表單的ID。然后，我們創建了一個XMLHttpRequest對象，并使用open()方法指定請求的方法和URL。這里假設我們的服務器端接口是'/forms/:id'，并使用DELETE方法來刪除表單數據。

接下來，我們通過為XMLHttpRequest對象的onreadystatechange事件添加回調函數來監聽請求狀態。當請求狀態為4（即請求已完成）并且請求狀態碼為200（即成功處理請求）時，我們執行刪除操作：找到相應表單元素并從其父節點中移除該表單。

通過使用Ajax技術，我們實現了無刷新刪除表單數據的功能。在點擊刪除按鈕時，頁面不會刷新，而是通過與服務器進行異步通信，實現實時的表單數據刪除。

總結起來，使用Ajax技術可以實現無刷新刪除表單數據的功能。通過將刪除按鈕的事件與服務器進行異步通信，我們可以在不刷新頁面的情況下，刪除相應表單并實時更新頁面。這種方法不僅提高了用戶體驗，還能減少對服務器資源的占用。希望本文能對您有所幫助！