网上书城之动态实现前端界面书籍分类&新书上架&热销书籍

关注

VIP免费原创最新推荐文章于 2026-02-21 04:04:37 发布 858 阅读 AI 写同款· GEO 优化 ›

网上书城首页之书籍分类列表网上书城首页之书籍分类列表本章目标、实现首页书籍分类列表一、开始编写代码1、主界面index.jsp2、单独写一个事件，和后台事件分开index.js代码3、然后在界面后面引用js现在的效果4、样式不出来的原因5、添加点击事件最终效果index.js全代码本章目标、实现首页书籍分类列表用代码实现动态的书籍分类（使用forEach实现），如下图：一、开始编写代码 1、主界面index.jsp 我们先把主界面的这一串分类列表注释 <!--<li class="list-group-item" 阅读详情

前言

之前实现了后台的登录注册，这一次讲述一下后台获取数据源实现前台的部分功能。

通常这种效果我们有两种方式来实现：

1、前端界面使用foreach标签实现；
2、前端界面使用ajax获取数据

我这次主要讲述ajax方法！

书籍分类列表

实现效果：
在这里插入图片描述
实现思路

<li class="list-group-item" style="color: white;">书籍分类</li>

主要是通过class选择器选中了这个li，再通过ajax获取数据源，成功回调后使用拼接html代码实现。

$(function(){
	//当浏览器访问index界面时 ajax 加载左侧书籍类别列表
	$.ajax({
		url:$("#ctx").val()+'/category.action?methodName=list',
		success:function(data){
			data=eval('('+data+')');
			for(i in data){
				$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {