在线商城之购物车实现——（附完整代码）

最新推荐文章于 2025-04-20 14:11:45 发布

小大之辩

最新推荐文章于 2025-04-20 14:11:45 发布

阅读量1.2w

点赞数 12

分类专栏：移动开发技术文章标签： javascript jquery html5 css

本文链接：https://blog.csdn.net/qq_44810972/article/details/118330113

版权

这篇博客详细介绍了如何实现一个在线商城的购物车功能，包括首页展示、购物车的添加删除操作、订单提交流程及订单管理。通过JavaScript、jQuery、HTML5和CSS完成各个模块的代码实现，并提供了功能演示，包括添加商品到购物车、支付、订单提交和取消等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首页

1.1实现效果

在这里插入图片描述

1.2代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线商城</title>
		<script src="jquery.min.js"></script>
		<style>
			ul {
    
				list-style: none;
			}

			a {
    
				text-decoration: none;
			}

			.goods {
    
				display: inline-block;
				width: 45%;
			}
		</style>

	</head>
	<body>
		<h1>在线商城</h1>
		<div>
		<div style="margin-bottom:-42px 10px;">
			我的购物车：
			</br>
			<span>
				<a href="cart.html">
				<img src="购物车.png">
				</a>
			</span>
		</div>
		<div style="float: right;margin: -62px 440px;">
			我的订单：
			<span>
				
				</br>
				<a href="myOrder.html">
				<img src="订单.png">
				</a>
			</span>
		</div>
		</div>
		<p></p>
		<div id="div_goods">
		</div>
	</body>
</html>
<script>
	//定义存放所有商品列表的数组对象
	var goodsList = [];

	//定义加载数据到表格中的方法
	function loadData() {
    
		//从json文件中载入数据
		$.ajax({
    
			url: 'goods.json',
			dataType: 'json',
			success: function(ret) {
    
				//设置存放商品信息的数组
				goodsList = ret; //!!
				//alert('请求发送成功!');
				// console.log(ret);
				createGoods(ret);

			} //end success
		}); //end ajax	

	} //end loadData
	//定义创建表格内容的方法
	function createGoods(data) {
    
		//遍历data中的内容，生成每个tr，加入到表格中
		var html = "";
		for (var i = 0; i < data.length; i++) {
    
			var obj = data[i];
			html += "<div  class=\"goods\">" +
				"<ul>" +
				"<li>" + obj.name + "</li>" +
				"<li>" +
				"  <img src=\"" + obj.image_url + "\" width=\"200px\" height=\"200px\" />" +
				"</li>" + 
				"<li style=\"color:red\">" + "￥" + obj.price + "</li>" +
				"<li style=\"color:blue\">" +
				"<a href=\"#\"  οnclick=\"add2Cart(" + obj.id + ")\" >加入购物车</a>" +
				"</li>"

				+
				"</ul>" +
				"</div>  ";
		}
		$("#div_goods").append(html);

	} //end createTable

	loadData();

	//定义将指定商品加入到购物车中
	function add2Cart(id) {
    
		// alert("您选择的商品id是:" + id)
		//1.根据商品id获得商品信息 遍历goodsList数组
		var goods;
		for (var i = 0; i < goodsList.length; i++) {
    
			if (id == goodsList[i].id) {
    
				goods = goodsList[i];
				break;
			} //end if
		} //end for
		//2.判断该商品是否在购物车中存在 
		//存在  数量为原来数量+1  不存在 数量为1
		//2.1获得存放购物车数据的全局sessionStorage变量
		var cart; //定义表示购物车的变量
		if (sessionStorage.getItem("mycart") == null) {
    
			//购物车没有被创建过，则新增购物车对象
			cart = {
    
				totalNumber: 0,
				totalMoney: 0,
				goods: []
			}
		} else {
     //取保存在全局变量的的内容，并转换成json对象
			cart = JSON.parse(
				sessionStorage.getItem("mycart"));
		}

		//2.2判断选择的商品是否在购物车中存在过
		var flag = false;
		for (var i = 0; i < cart.goods.length; i++) {
    
			if (cart.goods[i].id == id) {
     //存在
				cart.goods[i].number++; //原有数量+1
				cart.goods[i].money += cart.goods[i].price;
				flag = true;
				break;
			} //end if
		} //end for
		if (flag == false) {
     //选择的商品 在购物车中不存在
			//增加一条记录到购物车的goods数组中
			cart.goods.push({
    
				id: id,
				name: goods.name,
				price: goods.price,
				number: 1,
				money: goods.price
			});
		}
		//2.3修改整个购物车的总数量 和总金额
		cart.totalNumber++;
		cart.totalMoney += goods.price;

		//3.将修改后的购物车的内容，写入到全局变量中--字符串的形式
		sessionStorage.setItem("mycart", JSON.stringify(cart));
		// alert("加入购物车成功！");
	}
</script>

2、购物车

2.1 实现效果

在这里插入图片描述

2.2 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的购物车

最低0.47元/天解锁文章