在傳統的網頁開發中，當用戶提交一個表單時，頁面會被刷新，并且重新加載整個頁面。這個過程中，用戶可能會感到不便，并且也會消耗服務器和網絡資源。幸運的是，我們可以使用Ajax（Asynchronous JavaScript and XML）來實現表單提交不刷新頁面的效果。通過Ajax，我們可以在不離開當前頁面的情況下，向服務器發送請求并接收響應。這為用戶提供了更好的體驗，同時也減輕了服務器負荷。

假設我們有一個簡單的登錄表單。傳統的做法是，在用戶點擊登錄按鈕后，頁面會被刷新，然后服務器會驗證用戶的輸入并返回相應的結果。使用Ajax，我們可以使這個過程更加流暢和高效。

// HTML
<form id="loginForm" action="login.php" method="post">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<button type="submit">登錄</button>
</form>
// JavaScript
const form = document.getElementById('loginForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
const formData = new FormData(form);
// 使用Ajax發送請求到服務器
const xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
if (xhr.status === 200) {
alert('登錄成功！');
} else {
alert('登錄失敗！');
}
};
xhr.send(formData);
});

上面的代碼通過監聽表單的提交事件，然后使用Ajax發送POST請求到服務器，同時阻止了表單自動提交的行為。服務器在接收到請求后，可以驗證用戶的輸入并返回相應的結果。在這個例子中，如果返回的狀態碼是200，就表示登錄成功。否則，登錄失敗。

除了登錄表單，其他類型的表單也可以使用類似的方法實現無刷新提交。例如，我們可以使用Ajax來實現一個動態添加評論的功能。

// HTML
<form id="commentForm">
<input type="text" name="name" placeholder="您的姓名">
<textarea name="comment" placeholder="請輸入評論內容"></textarea>
<button type="submit">提交評論</button>
</form>
<div id="commentList"></div>
// JavaScript
const commentForm = document.getElementById('commentForm');
const commentList = document.getElementById('commentList');
commentForm.addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(commentForm);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'add_comment.php', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
const comment = document.createElement('div');
comment.innerHTML = '<h4>' + response.name + '</h4>' +
'<p>' + response.comment + '</p>';     
commentList.appendChild(comment);
commentForm.reset();
} else {
alert('添加評論失敗！');
}
};
xhr.send(formData);
});

在這個例子中，當用戶提交評論后，表單數據通過Ajax發送到服務器，并返回一個JSON格式的響應。如果成功添加評論，服務器將返回包含評論內容的JSON對象。我們通過使用DOM操作，將評論內容動態添加到評論列表中，并且成功添加評論后，清空表單。

總結來說，通過使用Ajax實現表單提交不刷新頁面是一種提供更好用戶體驗的方式。我們可以在不離開當前頁面的情況下，向服務器發送請求并接收響應。這為用戶提供了流暢和高效的交互，同時也減輕了服務器和網絡的負荷。無論是登錄表單、評論表單還是其他類型的表單，都可以通過類似的方式來實現無刷新提交。