AJAX是一種用于創建快速響應的網頁應用程序的技術，它允許將數據從網頁傳輸到數據庫中，而無需刷新整個頁面。通過使用AJAX，用戶可以在不離開當前頁面的情況下與數據庫進行交互，實現動態數據更新。本文將介紹如何使用AJAX從頁面傳值到數據庫，并通過舉例說明其應用。

在一個電子商務網站中，用戶可以實時添加商品到購物車，而無需刷新整個頁面。假設我們有一個名為“add_to_cart.php”的文件，當用戶點擊“添加到購物車”按鈕時，AJAX將會把所選商品的ID發送到該PHP文件，PHP文件再將該信息存儲到數據庫中。

首先，在HTML頁面中，我們需要添加一個按鈕和一個用于顯示反饋消息的元素：

<button id="add_to_cart_btn">添加到購物車</button>
<div id="feedback_message"></div>

接下來，我們使用JavaScript代碼來處理用戶點擊按鈕的事件，并使用AJAX從頁面傳值到數據庫：

document.getElementById("add_to_cart_btn").addEventListener("click", function() {
var productId = "123"; // 假設商品ID為123
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("feedback_message").innerHTML = this.responseText;
}
};
xhttp.open("POST", "add_to_cart.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("product_id=" + productId);
});

在上述代碼中，我們首先獲取了按鈕的DOM元素，并向其添加了一個事件監聽器。當用戶點擊按鈕時，我們創建了一個XMLHttpRequest對象（也稱為AJAX請求），并為其指定了一個回調函數。回調函數將在AJAX請求的狀態發生改變時被觸發，并且只有當請求成功（狀態碼為200）時，才會更新反饋消息元素的內容。

在AJAX請求的最后，我們使用了POST方法發送了一個名為"product_id"的參數，并將其值設置為假設的商品ID。這個參數將被傳遞到我們之前提到的"add_to_cart.php"文件中。

現在，讓我們來看一下"add_to_cart.php"文件是如何接收并處理從頁面傳遞過來的值：

<?php
$productId = $_POST["product_id"]; // 獲取從頁面傳遞過來的商品ID
// 將商品ID存儲到數據庫中的代碼...
echo "商品已成功添加到購物車！";
?>

在這個PHP文件中，我們首先使用$_POST超全局變量來獲取"product_id"參數。然后，我們可以編寫將商品ID存儲到數據庫的代碼，如插入一條新的購物車記錄等等。最后，我們使用echo語句返回一條反饋消息，該消息將在頁面上顯示給用戶。

通過使用AJAX從頁面傳值到數據庫，我們可以實現快速響應的網頁應用程序，并提供即時的用戶反饋。無論是在電子商務網站還是其他類型的網站中，這種技術都能夠提升用戶體驗和頁面交互性。