AJAX是一種常用的技術，用于實現網頁無刷新更新。在Web開發中，我們經常需要將用戶在表單中輸入的數據提交到數據庫進行保存。本文將介紹如何使用AJAX來實現將表單數據提交到數據庫，并以一個購物車示例來說明。

購物車示例

假設我們正在開發一個電子商務網站，用戶可以在該網站上選擇商品，并將其加入購物車。在用戶完成購物操作后，我們需要將購物車中的商品信息存儲到數據庫中。具體的表單包含了商品ID、商品名稱、商品數量等字段。在用戶點擊“加入購物車”按鈕時，我們通過AJAX將表單數據發送到后端進行處理并存入數據庫。

前端代碼

<form id="cartForm" method="post">
<input type="hidden" name="productID" value="123">
<input type="hidden" name="productName" value="iPhone 12">
<input type="number" name="quantity" value="1">
<button type="submit" id="addToCartButton">加入購物車</button>
</form>
<script>
document.getElementById("cartForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var form = event.target;
var formData = new FormData(form);
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽AJAX請求的狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
alert("已成功將商品添加到購物車！");
}
};
// 發送AJAX請求
xhr.open("POST", "saveToDatabase.php");
xhr.send(formData);
});
</script>

后端代碼

在后端，我們需要編寫一個處理AJAX請求的腳本來將表單數據存入數據庫。以下是一個使用PHP的示例代碼：

<?php
$productID = $_POST["productID"];
$productName = $_POST["productName"];
$quantity = $_POST["quantity"];
// 連接數據庫
$conn = mysqli_connect("localhost", "username", "password", "database");
// 將表單數據插入數據庫
$query = "INSERT INTO cart (product_id, product_name, quantity) VALUES ('$productID', '$productName', '$quantity')";
if (mysqli_query($conn, $query)) {
echo "success";
} else {
echo "error";
}
// 關閉數據庫連接
mysqli_close($conn);
?>

通過上述前端和后端代碼，當用戶點擊“加入購物車”按鈕時，AJAX請求將觸發，表單數據將通過POST方式發送到后端腳本。后端腳本將獲取表單數據，并將其插入到數據庫的購物車表中。如果插入成功，后端將返回"success"并在前端彈出成功提示；否則返回"error"。

通過AJAX提交表單數據到數據庫，我們可以實現網頁無刷新更新，提高用戶體驗。無論是購物車還是其他需要將表單數據提交到數據庫的場景，我們都可以借助AJAX來輕松實現。希望本文對你有所幫助！