帮我用js做一个购物车结算提交的传值代码
时间: 2023-12-03 10:45:24 浏览: 45
好的,以下是一个简单的购物车结算提交的传值代码示例:
HTML部分:
```html
<div>
<h3>商品列表</h3>
<ul id="product-list">
<li data-id="1" data-name="商品1" data-price="10.00">
商品1 - 10.00元
<button class="add-to-cart">加入购物车</button>
</li>
<li data-id="2" data-name="商品2" data-price="20.00">
商品2 - 20.00元
<button class="add-to-cart">加入购物车</button>
</li>
<li data-id="3" data-name="商品3" data-price="30.00">
商品3 - 30.00元
<button class="add-to-cart">加入购物车</button>
</li>
</ul>
</div>
<div>
<h3>购物车</h3>
<ul id="cart-list">
</ul>
<p>总价:<span id="total-price">0.00</span>元</p>
<button id="submit-btn">结算</button>
</div>
```
这里我们用了两个ul列表,一个用来展示商品列表,另一个用来展示购物车里的商品列表。
JS部分:
```js
// 获取商品列表
const productList = document.querySelectorAll('#product-list li');
// 获取购物车列表和总价
const cartList = document.querySelector('#cart-list');
const totalPrice = document.querySelector('#total-price');
// 初始化购物车商品数量和总价
let cartCount = 0;
let cartTotalPrice = 0;
// 添加商品到购物车
function addToCart(event) {
const product = event.target.parentElement;
const productId = product.dataset.id;
const productName = product.dataset.name;
const productPrice = Number(product.dataset.price);
// 创建购物车商品元素
const cartItem = document.createElement('li');
cartItem.innerHTML = `${productName} - ${productPrice.toFixed(2)}元`;
// 创建删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.addEventListener('click', removeFromCart);
// 添加购物车商品元素和删除按钮
cartItem.appendChild(deleteBtn);
cartList.appendChild(cartItem);
// 更新购物车数量和总价
cartCount++;
cartTotalPrice += productPrice;
totalPrice.textContent = cartTotalPrice.toFixed(2);
}
// 从购物车中删除商品
function removeFromCart(event) {
const cartItem = event.target.parentElement;
const productPrice = Number(cartItem.textContent.match(/(\d+\.\d{2})元/)[1]);
// 更新购物车数量和总价
cartCount--;
cartTotalPrice -= productPrice;
totalPrice.textContent = cartTotalPrice.toFixed(2);
// 删除购物车商品元素
cartItem.remove();
}
// 提交购物车内容
function submitCart() {
const cartItems = document.querySelectorAll('#cart-list li');
const cartData = [];
// 将购物车商品数据转换为数组
cartItems.forEach(cartItem => {
const productName = cartItem.textContent.match(/^([\u4e00-\u9fa5A-Za-z0-9]+)\s+-\s+(\d+\.\d{2})元$/)[1];
const productPrice = Number(cartItem.textContent.match(/(\d+\.\d{2})元/)[1]);
cartData.push({
name: productName,
price: productPrice
});
});
// 将购物车数据以JSON格式提交到服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-cart');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(cartData));
// 清空购物车
cartList.innerHTML = '';
totalPrice.textContent = '0.00';
cartCount = 0;
cartTotalPrice = 0;
}
// 绑定加入购物车按钮事件
productList.forEach(product => {
const addToCartBtn = product.querySelector('.add-to-cart');
addToCartBtn.addEventListener('click', addToCart);
});
// 绑定结算按钮事件
const submitBtn = document.querySelector('#submit-btn');
submitBtn.addEventListener('click', submitCart);
```
这里我们用了事件监听器来绑定加入购物车和结算按钮的点击事件。当用户点击加入购物车按钮时,我们会获取商品的id、名称、价格等信息,并将其添加到购物车列表中。当用户点击购物车里的删除按钮时,我们会从购物车列表中删除对应的商品,并更新购物车数量和总价。当用户点击结算按钮时,我们会将购物车里的商品数据转换为JSON格式,然后通过POST请求提交到服务器。在提交完成后,我们会清空购物车列表并重置购物车数量和总价。