网上书城搜索及加入购物车功能

关注

VIP免费原创最新推荐文章于 2026-05-11 11:48:03 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

网上书城项目之书籍搜索、购物车的初步实现网上书城项目前言书籍搜索购物车的初步实现总结前言今天为大家分享的知识点呢，是网上书城项目中的两个部分，书籍搜索页面的实现以及购物车的初步实现啦~ 书籍搜索书籍搜索呢，主要分为两个部分，左边部分是书籍分类部分，这个昨天的博客有详细说到过，所以就不再次细讲。而右边部分的书籍具体信息展示，由于内容不多，所以适合用c:forEach标签的方式来遍历数据~ 1、根据关键字进行搜索 2、根据书籍分类列表进行搜索左边书籍分类仍使用ajax局部刷新的方式右边部分的书籍信息展示使用从c:forEach的方式公共阅读详情

前言

这篇博客主要讲述网上书城的搜索页——根据书名搜索，根据分类搜索，以及将商品加入购物车的功能。

搜索页

效果图（根据书名关键字搜索）：
（我是搜索了一个1 ，由于我没有做赋值效果，图上看不到我搜索的关键字）
在这里插入图片描述
实现思路以及对应代码：
1、在搜索栏输入关键字；

2、传递关键字到后台；

//给搜索按钮增加跳转路径的点击事件
<button type="button" onclick="search()" class="btn btn-primary">搜索</button>
<script type="text/javascript">
function search(){
				location.href="${pageContext.request.contextPath }/book.action?methodName=search&name="+$("#book_name").val();
			}
</script>

3、在后台action中调用dao层进行查询需要的数据；

	public String search(HttpServletRequest req,HttpServletResponse resp) throws Exception {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Book> list = this.bookDao.list(book, pageBean);
		req.setAttribute("books", list);
		req.setAttribute("pageBean", pageBean);
		return "search";
	}

4、返回到前台使用自定义标签进行展示；

<c:forEach items="${books }" var="b">
					<div class="media">
						<img src="${b.image }" class="align-self-center mr-3" alt="...">
						<div class="media-body">