商品详情页的跳转js

// 假设有一个商品列表，每个商品都有一个链接
document.querySelectorAll('.product-link').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止默认的跳转行为
        const productId = this.getAttribute('data-product-id'); // 获取商品ID
        redirectToProductDetail(productId); // 调用跳转函数
    });
});

function redirectToProductDetail(productId) {
    // 使用AJAX获取商品详情数据
    fetch(`/api/products/${productId}`)
        .then(response => response.json())
        .then(data => {
            // 更新页面内容
            document.getElementById('product-detail').innerHTML = `
                <h1>${data.name}</h1>
                <p>${data.description}</p>
                <img src="${data.image}" alt="${data.name}">
            `;
        })
        .catch(error => console.error('Error:', error));
}