html购物车页面信息显示在订单页面代码
时间: 2023-12-07 15:02:58 浏览: 36
假设您已经使用 HTML 和 JavaScript 创建了购物车页面并且已经将商品添加到购物车中。现在您需要将购物车信息传递到订单页面并显示在订单页面上。
以下是示例代码:
购物车页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车页面</title>
</head>
<body>
<h1>购物车</h1>
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
</tr>
<tr>
<td>商品1</td>
<td>$10</td>
<td>2</td>
</tr>
<tr>
<td>商品2</td>
<td>$20</td>
<td>1</td>
</tr>
</table>
<button onclick="goToOrder()">去结账</button>
<script>
function goToOrder() {
// 获取购物车信息
var cartItems = document.querySelectorAll("table tr:not(:first-child)");
// 创建订单页面 URL
var orderUrl = "order.html";
// 将购物车信息编码为 URL 参数
var cartItemsString = encodeURIComponent(JSON.stringify(cartItems));
orderUrl += "?cartItems=" + cartItemsString;
// 跳转到订单页面
window.location.href = orderUrl;
}
</script>
</body>
</html>
```
订单页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>订单页面</title>
</head>
<body>
<h1>订单</h1>
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
</tr>
</table>
<script>
// 获取 URL 参数
var urlParams = new URLSearchParams(window.location.search);
var cartItemsString = urlParams.get("cartItems");
// 解码购物车信息
var cartItems = JSON.parse(decodeURIComponent(cartItemsString));
// 将购物车信息添加到订单页面
var table = document.querySelector("table");
for (var i = 0; i < cartItems.length; i++) {
var row = table.insertRow();
row.insertCell().textContent = cartItems[i].querySelectorAll("td")[0].textContent;
row.insertCell().textContent = cartItems[i].querySelectorAll("td")[1].textContent;
row.insertCell().textContent = cartItems[i].querySelectorAll("td")[2].textContent;
}
</script>
</body>
</html>
```
在购物车页面中,当用户单击“去结账”按钮时,JavaScript 函数`goToOrder()`将被调用。该函数获取购物车中的所有行,并将它们编码为 JSON 字符串,然后将该字符串添加到订单页面的 URL 上,并跳转到订单页面。
在订单页面中,JavaScript 代码从 URL 参数中解码购物车信息,并将购物车信息添加到订单表格中。
请注意,这只是一个简单的示例,您可以根据自己的需求进行修改和调整。