HTML购物车示例（勾选、删除、添加和结算功能）
<!DOCTYPE html>
<html>
<head>
<title>购物车示例</title>
<script>
function updateCart(action, productId) {
var CSRF_TOKEN = document.querySelector('input[name="_token"]').value;
var formData = new FormData();
formData.append('_token', CSRF_TOKEN);
formData.append('action', action);
formData.append('productId', productId);
fetch('/cart', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload(); // 刷新页面以显示更新后的购物车内容
} else {
alert('更新失败: ' + data.message);
}
})
.catch(error => alert('请求发送失败: ', error));
}
</script>
</head>
<body>
<!-- 假设这是从服务器获取的购物车内容 -->
<table>
<tr>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr>
<td>商品A</td>
<td>$100</td>
<td>
<button onclick="updateCart('remove', 'productA')">-</button>
1
<button onclick="updateCart('add', 'productA')">+</button>
</td>
<td>
<input type="checkbox" name="productA" checked>
</td>
</tr>
<!-- 其他商品行 -->
</table>
<button onclick="updateCart('checkout', '')">结算</button>
</body>
</html>这个简化的HTML购物车示例展示了如何使用JavaScript和Fetch API与服务器进行交互。当用户点击增加或减少数量按钮、勾选商品或点击结算按钮时，JavaScript函数updateCart会被调用，并向服务器发送相应的请求来更新购物车。服务器处理这些请求后，返回的数据用于刷新页面或显示错误信息。
评论已关闭