不同种类的列表是相同的，就贴出来一个
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>商品列表 | 小毛虫生鲜</title>
<link rel="stylesheet" type="text/css" href="./css/basic.css">
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<!-- <link rel="stylesheet" type="text/css" href="./css/main.css"> -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!-- 顶部 -->
<div class="outsid header_con">
<div class="header">
<div class="welcome fl">欢迎来到小毛虫生鲜!
<a href="http://127.0.0.1:3001/adminlogin.html">[管理员登录]</a>
</div>
<div class="fr">
<div class="login_btn fl">
<a href="/login.html">登录</a>
<span>|</span>
<a href="/register.html">注册</a>
</div>
<div class="user_link fl">
<span>|</span>
<a href="index.html">首页</a>
<span>|</span>
<a href="user_info.html">用户中心</a>
<span>|</span>
<a href="mycart.html">我的购物车</a>
</div>
</div>
</div>
</div>
<div class="outside">
<div class="search_bar clearfix">
<a href="/" class="logo fl"><img src="./images/base-img/logo.jpg"></a>
<div class="search_con fl">
<input type="text" class="input_text fl" name="q" placeholder="搜索商品">
<input type="button" class="input_btn fr" name="" value="搜索">
</div>
<div class="guest_cart fr">
<a href="/cart/" class="cart_name fl">我的购物车</a>
<div class="goods_count fl" id="show_count">0</div>
</div>
</div>
</div>
<!-- 中间内容 -->
<div class="outside navbar_con">
<div class="navbar clearfix">
<div class="subnav_con fl">
<h1>全部商品分类</h1>
<span></span>
<ul class="subnav">
<li><a href="goods_list.html?lid=1" class="fruit">新鲜水果</a></li>
<li><a href="goods_list.html?lid=2" class="seafood">海鲜水产</a></li>
<li><a href="goods_list.html?lid=3" class="meet">猪牛羊肉</a></li>
<li><a href="goods_list.html?lid=4" class="egg">禽类蛋品</a></li>
<li><a href="goods_list.html?lid=5" class="vegetables">新鲜蔬菜</a></li>
<li><a href="goods_list.html?lid=6" class="ice">速冻食品</a></li>
</ul>
</div>
<ul class="navlist fl">
<li><a href="index.html">返回首页 >></a></li>
</ul>
</div>
</div>
<div class="outside">
<div class="breadcrumb">
全部分类 > 商品列表
</div>
</div>
<div class="outside">
<div class="main_wrap clearfix">
<!-- <div class="l_wrap fl clearfix">
<div class="new_goods">
<h3>新品推荐</h3>
<ul>
<li>
<a href="/12"><img src="./images/goods2_01.jpg"></a>
<h4><a href="/12">基围虾</a></h4>
<div class="prize">￥45.00</div>
</li>
<li>
<a href="/11"><img src="./images/goods2_02.jpg"></a>
<h4><a href="/11">濒危刀鱼</a></h4>
<div class="prize">￥100.00</div>
</li>
</ul>
</div>
</div>
-->
<div class="r_wrap fr clearfix">
<ul class="goods_type_list clearfix">
<!--动态数据存放处-->
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer no-mp">
<div class="foot_link">
<a href="https://github.com/weilanhanf/daily_fresh_demo">关于我们</a>
<span>|</span>
<a href="https://www.cnblogs.com/welan/">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2020 大佬说的都队 All Rights Reserved</p>
<p>电话：17329410120 京ICP备123456789号</p>
</div>
<script src="./js/list.js"></script>
<script src="./js/out_login.js"></script>
<script src="./js/searchbar.js"></script>
</body>
</html>
js代码（list.js列表页）
$(function(){
// 获取首页点击获取更多时 地址栏里携带的lid
// 来判断请求的哪个列表
// 1---goods_fruit
// 2---goods_fish
// 3---goods_meat
// 4---goods_egg
// 5---goods_vegetable
// 6---goods_icecream
var lid=location.search.split("=")[1];
console.log(lid);
$.ajax({
url:"http://127.0.0.1:3000/list",
type:"get",
data:{lid},
dataType:"json"
})
.then(function(result){
console.log(result);
// 水果类
var html=``;
for(var i=0;i<result.length;i++){
html+=` <li>
<a href="${result[i].herf}"><img src="${result[i].img_url}"></a>
<h4><a href="${result[i].herf}">${result[i].title}</a></h4>
<div class="operate">
<span class="prize">￥${result[i].price.toFixed(2)}</span>
<span class="unit">${result[i].unit}</span>
</div>
</li>`
}
// <a href="/cart/add12_1/" class="add_goods" title="加入购物车"></a>
var ul1=document.querySelector(".goods_type_list");
ul1.innerHTML=html;
// console.log(ul1);
})
})
扫一扫
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
