js + ajax实现商品列表页到详情页的跳转

【代码】js + ajax实现商品列表页到详情页的跳转。

刻刻帝的海角

429人浏览 · 2023-09-09 07:48:48

刻刻帝的海角 · 2023-09-09 07:48:48 发布

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="box"></div>
		<script src="./js/index.js"></script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
	</head>
	<link rel="stylesheet" href="./css/home.css">
	<body>
		<div class="box">

			<div><strong>积分：20</strong>
				<strong>人气：99</strong>
			</div>

		</div> -->
		</div>
		<script src="./js/home.js"></script>
	</body>
</html>

css部分：

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 50%;
	margin-left: 1%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

.item {
	width: 44%;
	margin: 1% 10px;
}

.item img {
	width: 100%;
	height: 300px;
}

.item p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 36px;
}

.item div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 50%;
	margin-left: 1%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

.head {
	width: 100%;
	display: flex;
	align-items: center;
}

.head img {
	width: 20px;
	height: 20px;
}

h1 {
	margin: 0 auto;
}

.item {
	width: 44%;
	margin-top: 5%;
	margin-left: 30%;
}

.item img {
	width: 100%;
	height: 300px;
}

.item p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 36px;
}

.item div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

JavaScript部分：

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。