AJAX（Asynchronous JavaScript and XML）是一種在前端和后端之間進行異步通信的技術。它允許在不刷新整個頁面的情況下，通過與服務器交換數據來實現局部更新。在本文中，我們將探討如何使用AJAX提交表單并刷新當前頁面。
假設我們有一個簡單的聯系表單，其中包括姓名、電子郵件和消息。我們希望能夠通過AJAX將這些表單數據發送到服務器，然后在頁面上顯示成功或失敗的消息，而不是刷新整個頁面。
<form id="contact-form" action="submit.php" method="post"> <input type="text" name="name" placeholder="姓名" required> <input type="email" name="email" placeholder="電子郵件" required> <textarea name="message" placeholder="消息" required></textarea> <button type="submit">提交</button> </form> <div id="message"></div>
上面的代碼是一個簡單的表單，其中包括了三個輸入字段以及一個提交按鈕。我們使用id屬性為該表單命名為"contact-form"，并將其數據通過HTTP POST方法發送到submit.php頁面。
為了實現通過AJAX提交表單并刷新當前頁面的功能，我們需要編寫一些JavaScript代碼。請將以下代碼添加到頁面的<head>標簽中：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#contact-form').submit(function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = $(this).serialize(); // 獲取表單數據
// 發送AJAX請求
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: formData,
success: function(response) {
$('#message').text(response.message); // 在#message元素中顯示成功或失敗的消息
},
error: function(xhr, status, error) {
console.error(xhr.responseText); // 在控制臺中輸出錯誤
}
});
});
});
</script>以上代碼使用了jQuery，所以請確保在頁面中引入了jQuery庫。在JavaScript代碼中，我們為表單的submit事件注冊了一個處理函數。當用戶提交表單時，此函數將被調用。
在函數中，我們首先使用event.preventDefault()方法阻止表單的默認提交行為，以便我們可以自己處理數據的發送。然后，我們使用$(this).serialize()方法獲取表單數據，并將其轉換為URL編碼的字符串。
接下來，我們使用$.ajax()方法發送AJAX請求。在此方法的參數中，我們指定了服務器端的URL、HTTP方法和數據。成功時，服務器將返回一個響應，并觸發success回調函數，我們可以在其中處理響應數據。在上述代碼中，我們使用$('#message').text(response.message)將響應中的消息顯示在頁面上。
如果請求失敗，服務器將返回一個錯誤響應，觸發error回調函數。在上述代碼中，我們使用console.error(xhr.responseText)將錯誤消息輸出到控制臺中。
通過以上代碼，我們成功地實現了通過AJAX提交表單并刷新當前頁面的功能。當用戶點擊提交按鈕時，表單數據將使用AJAX技術發送到服務器，并且頁面將立即顯示成功或失敗的消息，而不需要整個頁面進行刷新。
總之，AJAX是一種強大的前端技術，可以改善用戶體驗并提高網站的性能。通過在提交表單時使用AJAX技術，我們可以實現部分頁更新，并在不刷新整個頁面的情況下顯示成功或失敗的消息。