js商品页通过动态获取url参数跳转到商品详情页

最新推荐文章于 2024-06-04 19:55:06 发布

梧桐落叶~

最新推荐文章于 2024-06-04 19:55:06 发布

阅读量3.7k

点赞数 6

分类专栏： demo 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_44023519/article/details/106104542

版权

demo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面结构

在这里插入图片描述

json模拟数据–goods.json

{
	"goods": [{
			"id": 1,
			"imgUrl":"./图片1.png",
			"price": "4500.00",
			"title": "小米笔记本",
			"desc": "敢于拼搏，一切皆有可能。"
		},
		{
			"id": 2,
			"imgUrl":"./图片1.png",
			"price": "5800.00",
			"title": "苹果8",
			"desc": "敢于拼搏，一切皆有可能。"
		},
		{
			"id": 3,
			"imgUrl":"./图片1.png",
			"price": "3450.00",
			"title": "ipad",
			"desc": "敢于拼搏，一切皆有可能。"
		},
		{
			"id": 4,
			"imgUrl":"./图片1.png",
			"price": "4000.00",
			"title": "华为mate",
			"desc": "敢于拼搏，一切皆有可能。"
		},
		{
			"id": 5,
			"imgUrl":"./图片1.png",
			"price": "5500.00",
			"title": "苹果watch",
			"desc": "敢于拼搏，一切皆有可能。"
		}
	]
}

商品页–index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<style type="text/css">
			ul,
			li {
				list-style: none;
			}
			.sec_li {
				float: left;
				margin: 10px;
				border: 1px solid gray;
				height: 300px;
				width: 200px;
			}
		</style>
	</head>

	<body>
		<div class="content">

		</div>

		<script type="text/javascript">
			$(function() {
				$.ajax({
					type: "get",
					url: "./goods.json",
					dataType: "json",
					success: function(res) {
						console.log(res.goods)
						var str = "<ul class='con_ul'>";
						$.each(res.goods, function(idx, val) {
							str += "<li class=\"sec_li\"><a target='_blank' href='goodsDetail.html?goodsId=" + val.id + "' class='lp_li_a'><div class='lp_li_imgWrap'><img src='" + val.imgUrl + "'/></div><p class='lp_li_name'>" +
								val.title + "</p><p class='lp_li_price'>" +
								'￥' + val.price +"</p></a></li>";
						});
						str += "</ul>";
						$('.content').append(str);
					},
					error: function(error) {
						console.log(error)
					}
				});
			})
		</script>
	</body>

</html>

商品详情页–goodsDetail.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	</head>

	<body>
		<div class="booksDeatail">

		</div>
		<script type="text/javascript">
			$(function() {
				//获取url中的参数
				function getUrlParam(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
					var r = window.location.search.substr(1).match(reg); //匹配目标参数
					if(r != null) return unescape(r[2]);
					return null; //返回参数值
				}
				//接收URL中的参数goodsId
				var id = getUrlParam('goodsId');
				
				$.ajax({
					type: 'get',
					url: './goods.json',
					dataType: 'json',
					success: function(res, status) {
						$.each(res.goods, function(idx, val) {
							//根据id获取详情数据
							if(id == val.id) {
								var str = "<img src='" + val.imgUrl + "'/><p>商品编号：" + val.id + "</p><p>产品名称：" + val.title + "</p><p>商品简介：" + val.desc + "</p>";
							}
							$('.booksDeatail').append(str);
						});
					},
					error: function(error) {
						console.log(error)
					}
				})
			})
		</script>
	</body>

</html>

效果图

在这里插入图片描述

梧桐落叶~

关注

6
点赞
踩
54

收藏

觉得还不错? 一键收藏
1
评论
js商品页通过动态获取url参数跳转到商品详情页

页面结构json模拟数据–goods.json{ "goods": [{ "id": 1, "imgUrl":"./图片1.png", "price": "4500.00", "title": "小米笔记本", "desc": "敢于拼搏，一切皆有可能。" }, { "id": 2, "imgUrl":"./图片1.png", "price": "5800.00", "title": "苹果8", "desc": "敢于拼搏，一切皆
复制链接

扫一扫

专栏目录