在現代網絡應用開發中，我們經常使用Ajax來實現頁面無刷新的交互效果。而其中一個常見的需求是通過點擊一個按鈕來提交表單數據。本文將介紹如何使用Ajax和Button元素的submit事件來實現這個功能。

假設我們有一個簡單的登錄表單，包含用戶名和密碼兩個輸入框。當用戶點擊登錄按鈕時，我們希望通過Ajax將表單數據發送到服務器進行驗證，并根據驗證結果在頁面上展示相應的提示信息。

首先，我們需要在HTML中定義一個form元素，包含兩個輸入框和一個按鈕：

<form id="loginForm">
<label>用戶名:</label>
<input type="text" name="username" />
<br />
<label>密碼:</label>
<input type="password" name="password" />
<br />
<button type="submit" id="loginButton">登錄</button>
</form>

接下來，我們可以使用JavaScript來處理按鈕的點擊事件，并使用Ajax來發送表單數據到服務器：

document.getElementById('loginButton').addEventListener('click', function(event) {
event.preventDefault();  // 阻止表單默認的提交行為
var form = document.getElementById('loginForm');
var formData = new FormData(form);  // 將表單數據封裝成FormData對象
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/login', true);  // 指定請求方法、URL和異步標志
// 設置請求頭，告訴服務器如何處理請求體的數據
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 注冊回調函數，當請求狀態發生改變時執行
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，處理服務器返回的數據
var response = JSON.parse(xhr.responseText);
// 顯示登錄結果
alert(response.message);
}
};
// 發送請求
xhr.send(formData);
});

在上述代碼中，我們使用了addEventListener方法來注冊按鈕的點擊事件。當按鈕被點擊時，首先調用event.preventDefault()方法阻止表單的默認提交行為。接著，我們通過getElementById方法獲取到表單元素和按鈕元素。然后使用FormData對象將表單數據封裝起來。創建一個XMLHttpRequest對象，并使用open方法指定請求方法、URL和異步標志。

接著，我們設置請求頭的Content-Type字段，告訴服務器如何處理請求體的數據。在本例中，我們將請求體的數據編碼為URL參數的形式。最后，我們注冊了一個回調函數，當請求狀態發生改變時會被執行。這里只處理了請求成功的情況，通過解析服務器返回的JSON數據，我們可以獲得登錄結果并在頁面上展示相應的提示信息。

通過上述代碼，我們成功地實現了通過點擊按鈕來提交表單數據的功能，并使用Ajax無刷新地處理服務器返回的結果。在實際應用中，我們可以根據需求對代碼進行進一步的優化和改進，例如添加表單驗證、展示加載動畫等。

總結來說，通過使用Ajax和Button元素的submit事件，我們可以從頁面上無刷新地發送表單數據到服務器，并處理服務器返回的結果。這樣的交互方式能夠提升用戶體驗，并使應用更加靈活和高效。