<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>分类</title> <script src="./js/jquery-3.7.0.js"></script> <link rel="stylesheet" href="./css/classify.css" /> </head> <body> <!-- 分页头部 --> <div class="head"> <p>商品分类</p> </div> <!-- 15商品分类-列表 --> <div class="content"> <div class="content_left". id="content_con"> <!-- <div class="content_con" onclick="proCli(event)"> <img src="./img/10002.png" alt="" onerror="good(event)"/> <p>商品1</p> </div> --> </div> <!-- 16.商品分类-商品 --> <div class="goods_list" id="goods_list" onclick="iteng()"> <!-- <div class="product" onclick="proCli()" id="product"> <div class="img_goods"> <img src="./img/10002.jpg" /> </div> <p>xxxxxxxx(商品介绍)</p> <div class="text_goods"> <p style="color: red;">16666$</p> <p style="color: gray;">库存</p> </div> </div> --> </div> </div> <!-- 首页 /分类 /购物车/我的--> <div class="footer"> <a href="./home.html"> <div class="bar"> <img src="./img/10002 (1).png" alt="" /> <p>首页</p> </div> </a> <a> <div class="bar"> <img src="./img/10021.png" /> <p style="color: red;">分类</p> </div> </a> <a> <div class="bar"> <img src="img/10008.png" /> <p>购物车</p> </div> </a> <a> <div class="bar"> <img src="img/10006.png" /> <p>我的</p> </div> </a> </div> <div id="hint">提示</div> <script src="./js/classify.js"></script> </body> </html>
这是一个简单的电商网站中的商品分类页面，以下是分类页面代码的详细介绍：
1. ```<meta charset="utf-8" />```指定编码格式为UTF-8。
2. ```<meta name="viewport" content="width=device-width, initial-scale=1">```设置viewport适配移动设备。
3. ```<title>分类</title>```设置页面标题为“分类”。
4. ```<script src="./js/jquery-3.7.0.js"></script>```引入jQuery库。
5. ```<link rel="stylesheet" href="./css/classify.css" />```引入分类页面所用到的CSS文件。
6. ```<div class="head">```页面头部，包含一个“商品分类”的标题。
7. ```<div class="content">```页面内容部分，包含两个部分，一个是商品分类的列表，另一个是商品列表。
8. ```<div class="content_left". id="content_con">```商品分类的列表部分，包含了所有的商品分类列表。
9. ```<div class="goods_list" id="goods_list" οnclick="iteng()">```商品列表部分，包含了所有该分类下的商品。
10. ```<div class="footer">```页面底部，包含了四个链接，分别是：首页、分类、购物车、我的。
11. ```<div id="hint">提示</div>```页面提示框，用于显示一些提示信息。
12. ```<script src="./js/classify.js"></script>```引入分类页面所用到的JavaScript文件。
$.ajax({ type: "post", // 发送的HTTP请求类型为POST url:请求的URL地址 success: function(res) { // 请求成功的回调函数 if (res.code == 1) { console.log(res); contentData(res.data); // 调用contentData函数并传递响应数据 } else { console.log("请求失败"); // 请求失败的处理逻辑 } }, error: function(resi) { // 请求失败的回调函数 if (resi.code == 1) { console.log(resi); contentData(resi.data); // 调用contentData函数并传递响应数据 } else { console.log("请求失败"); function goods(e) { // 图片加载失败的处理函数 e.target.src = "./img/10014 (1).jpg"; } // 请求失败的处理逻辑 } } }); function contentData(data) { // 处理商品内容数据的函数 console.log(data); let str = ''; for (let i = 0; i < 10; i++) { str += ` <div class="content_con" onclick="productData(event,${data[i].id})"> <img src="${data[i].imgs}" alt="" onerror="good(event)" onerror="goods(event)"/> <p>${data[i].name}</p> </div>`; } $('#content_con').html(str); // 将处理结果插入到指定的DOM元素中 } function productData(event, index) { // 处理商品数据的函数 let element = event.currentTarget; $('.content_con').removeClass('clicked'); $(element).addClass('clicked'); console.log(index); $.ajax({ type: "post", url: 请求的URL地址 data: { id: index // 将red.value作为id传递给请求数据 }, success: function(res) { // 请求成功的回调函数 console.log(res); if (res.code == 1) { goodsCode(res.data); } else { console.log("请求失败"); // 请求失败的处理逻辑 console.log(res); console.log(1) let str = ` <img src="./img/10002 (1).png" alt="" />`; $('#goods_list').html(str); } }, error: function(xhr, status, error) { console.error(error); // 请求失败的回调函数 // 错误处理逻辑 if (res.code == 0) { // 处理错误逻辑 goodsCode(item); function goods(e) { // 图片加载失败的处理函数 e.target.src = "./img/10014 (1).jpg"; } } else { console.log("请求失败"); // 请求失败的处理逻辑 console.log(res); } } }); } function good(e) { // 图片加载失败的处理函数 e.target.src = "./img/10014 (1).jpg"; } function goodsCode(item) { // 处理商品编码的函数 console.log(item); let str = ''; for (let i = 0; i < item.length; i++) { str += ` <div class="product" onclick="proCli()" id="product"> <div class="img_goods"> <img src="${item[i].imgs}" onerror="good(event)" onclick="iteng(event)"/> </div>3 <p>${item[i].introduce}</p> <div class="text_goods"> <p style="color: red;">￥${item[i].price}</p> <p style="color: gray;">${item[i].stock}</p> </div> </div>`; } $('#goods_list').html(str); // 将处理结果插入到指定的DOM元素中 } function iteng(e) { let str = ''; for (let i = 0; i < item.length; i++) { str += `<img src="${item[i].imgs}" onerror="iteng(event)" />`; } $('#goods_list').html(str); // 将处理结果插入到指定的DOM元素中 }
这段代码是一个使用 jQuery 的 AJAX 请求，它通过 POST 请求获取指定 URL 的数据。在请求成功时，会执行 success 函数，通过对响应数据进行处理后，将处理结果插入到指定的 DOM 元素中。在请求失败时，会执行 error 函数，处理错误情况，如图片加载失败等。具体步骤如下：
1. 点击内容中的商品，触发 productData 函数，并将点击的商品 ID 作为参数传递给它。
2. productData 函数通过 AJAX POST 请求获取指定 ID 对应的商品数据，请求成功后，将商品数据传递给 goodsCode 函数进行处理。
3. goodsCode 函数将商品数据通过循环处理后，生成 HTML 格式的商品列表，并将结果插入到指定的 DOM 元素中。整个过程中，利用了 jQuery 的 AJAX 请求和 DOM 操作等核心功能，以及 JavaScript 中的循环、条件判断等基础语法，实现了动态加载商品列表的功能。
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
