傳統(tǒng)的網(wǎng)頁開發(fā)中，通過刷新整個頁面來獲取最新的數(shù)據(jù)。然而，隨著Ajax（Asynchronous JavaScript and XML）技術(shù)的成熟應(yīng)用，我們可以使用它來使網(wǎng)頁局部地更新，而不需要刷新整個頁面。本文將介紹如何使用Ajax傳遞數(shù)據(jù)到另一個php頁面，以及通過實際的例子加深我們的理解。
假設(shè)我們正在開發(fā)一個在線購物網(wǎng)站，在用戶選擇商品數(shù)量時，可以實時更新購物車中該商品的數(shù)量和總價。傳統(tǒng)的做法是，用戶選擇完數(shù)量后，點擊“更新購物車”按鈕，然后整個頁面會刷新，顯示購物車中最新的數(shù)量和總價。而使用Ajax，我們可以在用戶選擇數(shù)量的同時，實時更新購物車中的數(shù)據(jù)，無需刷新整個頁面。
首先，讓我們看一下前端頁面的代碼。
<html>
<head>
<script>
function updateCart(productId, quantity) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 更新購物車數(shù)量和總價的顯示
document.getElementById("cart-quantity").innerHTML = this.responseText;
document.getElementById("cart-total").innerHTML = this.responseText * 10; // 假設(shè)商品每個價值10元
}
};
xmlhttp.open("GET", "update_cart.php?product_id=" + productId + "&quantity=" + quantity, true);
xmlhttp.send();
}
</script>
</head>
<body>
<h1>購物車</h1>
<div>
<p>商品1：</p>
<input type="number" id="quantity1" onchange="updateCart(1, this.value)">
</div>
<div>
<p>商品2：</p>
<input type="number" id="quantity2" onchange="updateCart(2, this.value)">
</div>
<div>
<p>購物車數(shù)量：</p>
<p id="cart-quantity">0</p>
</div>
<div>
<p>購物車總價：</p>
<p id="cart-total">0</p>
</div>
</body>
</html><?php
// 獲取傳遞過來的商品ID和數(shù)量
$productId = $_GET['product_id'];
$quantity = $_GET['quantity'];
// 更新購物車數(shù)據(jù)庫中的商品數(shù)量，并獲取最新的購物車數(shù)量
// 這里省略了數(shù)據(jù)庫操作的具體代碼
// 模擬購物車數(shù)量的結(jié)果，并返回給前端
$cartQuantity = 10; // 假設(shè)購物車中有10件商品
echo $cartQuantity;
?>