本文主要介紹如何使用Ajax技術動態獲取商品ID。通過Ajax，我們可以在不刷新網頁的情況下向服務器發送請求并獲取數據。這種技術在電商網站中非常常見，例如當用戶選擇不同的商品分類時，網頁會實時地顯示對應分類的商品。通過Ajax動態獲取商品ID，可以實現更流暢的用戶體驗，并且提供更多的交互功能。

假設我們有一個電商網站，提供了多個商品分類供用戶選擇。用戶點擊某個分類，頁面需要動態加載該分類下的商品ID，以便展示相應的商品信息。我們可以使用Ajax技術實現這個功能。

首先，我們需要編寫前端代碼來處理用戶的點擊事件，并向服務器發送Ajax請求。以下是一個簡單的示例代碼：

// HTML代碼
<select id="category">
<option value="1">電子產品</option>
<option value="2">家居用品</option>
<option value="3">服裝鞋帽</option>
</select>
<div id="productIds"></div>
// JavaScript代碼
const categorySelector = document.getElementById('category');
const productIdsContainer = document.getElementById('productIds');
categorySelector.addEventListener('change', function() {
const selectedCategory = categorySelector.value;
// 發送Ajax請求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/getProductIds?category=' + selectedCategory, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const productIds = JSON.parse(xhr.responseText);
productIdsContainer.innerHTML = productIds.join(', ');
}
};
xhr.send();
});

上述代碼中，我們在HTML中創建了一個下拉框<select>，并為每個選項指定了相應的值。當用戶選擇某個分類時，JavaScript代碼會監聽<select>的change事件，并獲取用戶選擇的分類值。然后，我們使用XMLHttpRequest對象創建一個GET請求，向服務器發送請求，請求的URL包含了用戶選擇的分類值。服務器返回的響應是一個包含商品ID的JSON數組，我們將其轉換為JavaScript數組，并將商品ID展示在頁面上。

在服務器端，我們需要根據用戶選擇的分類值，查詢數據庫并返回相應的商品ID。以下是一個簡單的示例代碼：

const express = require('express');
const app = express();
// 處理GET請求
app.get('/getProductIds', function(req, res) {
const selectedCategory = req.query.category;
const productIds = getProductIdsFromDatabase(selectedCategory);
res.send(productIds);
});
// 查詢數據庫，返回商品ID
function getProductIdsFromDatabase(category) {
// 根據分類查詢數據庫并返回商品ID
// 此處省略數據庫查詢過程，僅作示例
const productIds = [
'1001',
'1002',
'1003',
'1004',
'1005'
];
return productIds;
}
app.listen(3000, function() {
console.log('Server is running on http://localhost:3000');
});

上述代碼使用Express.js框架創建一個簡單的服務器。當收到客戶端的GET請求時，我們從請求參數中獲取用戶選擇的分類值，并根據該值查詢數據庫，獲取相應的商品ID。最后，我們將商品ID作為響應發送給客戶端。

通過以上前端和服務器端的代碼，我們可以實現動態獲取商品ID的功能。當用戶選擇不同的分類時，頁面會實時展示該分類下的商品ID。這樣，用戶就可以方便地瀏覽和選擇感興趣的商品。

總結來說，通過Ajax動態獲取商品ID可以實現更流暢的用戶體驗和更高的交互性。無論是電商網站還是其他類型的網站，都可以使用這個技術來提升用戶體驗和功能實現。