Ajax技術可以實現網頁的異步加載和交互，在實際的web應用開發中具有廣泛的應用。本文將介紹如何使用Ajax來提交表單數據到數據庫中，以及實現數據的實時更新。

假設我們有一個簡單的注冊表單，用戶需要輸入用戶名、密碼和電子郵件地址。用戶填寫完表單后，我們希望能夠將數據保存到數據庫中，并提示用戶注冊成功。在傳統的方式中，我們需要使用表單的submit事件來提交數據，并在后臺進行處理。但是使用Ajax，我們可以實現異步提交數據，用戶無需刷新頁面就可以完成注冊操作。

首先，我們需要編寫一個處理表單提交的服務器端腳本。比如，我們使用PHP來處理表單數據。下面是一個示例的PHP腳本：

// save_form_data.php
// 獲取表單數據
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
// 將數據保存到數據庫中
// ...
// 返回注冊成功的提示信息
echo '注冊成功！';

接下來，我們需要使用JavaScript來編寫Ajax代碼，以便通過表單提交數據并接收服務器返回的數據。下面是一個示例的JavaScript代碼：

// 注冊表單提交的函數
function submitForm() {
var form = document.getElementById('register-form');
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'save_form_data.php', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 400) {
// 注冊成功，顯示服務器返回的提示信息
var response = xhr.responseText;
alert(response);
} else {
alert('提交失敗，請稍后重試。');
}
};
xhr.onerror = function() {
alert('提交失敗，請稍后重試。');
};
xhr.send(data);
}

在上面的代碼中，我們首先獲取了注冊表單的引用，并使用FormData對象來獲取表單的數據。然后創建一個XMLHttpRequest對象，并通過open函數指定POST方法和服務器端腳本的URL。接下來，我們定義了onload和onerror事件處理函數。當請求成功完成時，onload函數會被調用，我們可以通過xhr.responseText獲取服務器返回的數據，然后根據結果進行相應的處理。如果請求過程中發生錯誤，onerror函數會被調用。

在HTML中，我們需要將上述的JavaScript代碼與表單相關聯，并在用戶點擊"注冊"按鈕時，調用submitForm函數來提交表單數據。下面是一個示例的HTML代碼：

<form id="register-form" onsubmit="event.preventDefault(); submitForm();">
<input type="text" name="username" placeholder="用戶名" required />
<input type="password" name="password" placeholder="密碼" required />
<input type="email" name="email" placeholder="電子郵件地址" required />
<button type="submit">注冊</button>
</form>

在上述的HTML代碼中，我們使用了onsubmit事件來阻止表單的默認提交行為，并調用submitForm函數來異步提交表單數據。

總結起來，通過使用Ajax技術，我們可以實現表單數據的異步提交，并實時更新數據庫。用戶填寫并提交表單后，無需刷新頁面即可看到注冊成功的提示信息。這使得用戶體驗更加流暢，并提高了應用的性能。