AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術，它可以在不刷新整個頁面的情況下，通過 JavaScript 和 XML 實現與服務器的異步通信。這種技術在現代互聯網應用程序中廣泛應用，能夠提升用戶體驗并提高網站性能。本文將介紹如何使用 AJAX 傳遞表單數據到服務器，并將數據存儲在單個數據庫中。

假設我們正在開發一個留言板應用程序，用戶可以通過表單輸入名稱和留言內容，并點擊提交按鈕將數據發送到服務器。服務器接收到數據后，將其存儲在單個數據庫表中。下面是一個簡單的示例，演示了如何使用 AJAX 完成這個過程。

首先，我們需要在客戶端（瀏覽器端）編寫 HTML 表單代碼：

<form id="messageForm">
<label for="name">姓名: </label>
<input type="text" id="name" name="name"><br>
<label for="message">留言內容: </label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="提交">
</form>

在上面的代碼中，我們使用了一個表單元素（id 為 "messageForm"），其中包含了一個姓名輸入框和一個留言內容文本域，還有一個提交按鈕。當用戶點擊提交按鈕時，將觸發表單的提交事件，并調用相應的 JavaScript 代碼。

接下來，我們需要編寫 JavaScript 代碼，通過 AJAX 將表單數據發送到服務器：

document.getElementById("messageForm").addEventListener("submit", function(event) {
// 阻止表單默認提交行為
event.preventDefault();
// 獲取表單數據
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
// 創建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 配置請求參數
xhr.open("POST", "/submit-message", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器響應
console.log(xhr.responseText);
}
};
// 發送請求
xhr.send("name=" + encodeURIComponent(name) + "&message=" + encodeURIComponent(message));
});

在上面的代碼中，我們為表單的提交事件添加了一個事件監聽器。當表單提交時，該監聽器會阻止表單的默認提交行為，并獲取姓名和留言內容的值。然后，我們創建了一個 XMLHttpRequest 對象，并使用 open 方法配置了請求的方法、URL 和異步標志。此外，還設置了請求頭的 Content-Type，告訴服務器發送的數據是表單格式的。接著，我們定義了 onreadystatechange 回調函數，在請求狀態為 4（已完成）且狀態碼為 200 （成功）時，處理服務器的響應。最后，我們通過 send 方法發送了表單數據。

服務器端（后端）可以使用任何語言和框架來處理 AJAX 請求，并將數據存儲在數據庫中。這里以使用 Node.js 和 Express 框架為例：

// 導入 Express 模塊
const express = require("express");
const app = express();
// 導入中間件
app.use(express.urlencoded({ extended: true }));
// 處理表單提交請求
app.post("/submit-message", (req, res) =>{
// 獲取表單數據
var name = req.body.name;
var message = req.body.message;
// 存儲數據到數據庫
// ...
// 響應客戶端
res.send("Message submitted successfully.");
});
// 啟動服務器
app.listen(3000, () =>{
console.log("Server started on port 3000");
});

在上面的服務器端代碼中，我們首先導入了 Express 模塊，并使用 express.urlencoded 中間件來解析表單數據。然后，我們定義了一個路由處理程序，當客戶端發送 POST 請求到 "/submit-message" 路徑時，會觸發該處理程序。在處理程序中，我們通過 req.body 對象獲取到表單數據，并進行相應的處理，比如將數據存儲到數據庫中。最后，我們使用 res.send 方法發送響應到客戶端。

通過上述例子，我們演示了如何使用 AJAX 傳遞表單數據到服務器，并將數據存儲在單個數據庫中。這種方式可以大大提升用戶體驗，使網頁應用程序更具互動性和實時性。