网上书城项目之书籍搜索、购物车的初步实现

最新推荐文章于 2022-07-20 22:14:36 发布

秃头程序汪

最新推荐文章于 2022-07-20 22:14:36 发布

阅读量1.3k

点赞数 1

分类专栏： easyui 项目开发文章标签： jquery jsp

本文链接：https://blog.csdn.net/qq_45464930/article/details/107215197

版权

网上书城项目

前言

前言

今天为大家分享的知识点呢，是网上书城项目中的两个部分，书籍搜索页面的实现以及购物车的初步实现啦~

书籍搜索

书籍搜索呢，主要分为两个部分，左边部分是书籍分类部分，这个昨天的博客有详细说到过，所以就不再次细讲。

而右边部分的书籍具体信息展示，由于内容不多，所以适合用c:forEach标签的方式来遍历数据

网上书城之书籍分类、新书上架、热销图书

有两种方式可以进行搜索：

一、根据关键字进行搜索

代码实现

search.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="w" uri="/wangqiuping"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书籍搜索页</title>
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>   
<title>首页</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/fg.css" />
</head>
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
	<div class="col-sm-4">
		您好，欢迎来到网上书城！
	</div>
	<div class="col-sm-4 col-sm-offset-4">
	    <a type="button" href="${pageContext.request.contextPath}/login.jsp">登录</a>
	    <a type="button" href="${pageContext.request.contextPath}/register.jsp">注册</a>
		<a type="button" href="${pageContext.request.contextPath}/shoppingCar.jsp">我的购物车</a> 
		<a type="button" href="${pageContext.request.contextPath}/index.jsp">网站首页</a>
	</div>
</div>
<!-- 搜索栏 -->
<div class="row">
	<div class="col-sm-12 search-parent">
		<!-- 本来这里应该放一张背景图的 -->
		<div class="search"></div>
		<input type="text" id="book_name" name="name" value="" />
		<button onclick="search()" type="button" class="btn btn-primary">搜索</button>
	</div>
</div>
<!-- 主内容区 -->
<div class="row content">
	<div class="col-sm-3 l-content">
		<ul class="list-group c-category "></ul>
	</div>
   <div class="col-sm-9">
	  <c:forEach items="${books}" var="b">
		<div class="media">
			<img src="${b.image}" class="align-self-center mr-3" alt="...">
			<div class="media-body">
				<p>${b.name}</p>
				<p>作者:${b.author}</p>
				<p>价格：￥ ${b.price}</p>
				<p>出版社:${b.publishing}</p>
				<p>简介:${b.description}</p>	
				<p>
			<!-- <button class="btn btn-danger" onclick='addShopCar(this)' style="width: 150px;">加入购物车</button> -->
			<a style="width: 150px;" class="btn btn-danger" href="${pageContext.request.contextPath}/shopping.action?methodName=add&name=${b.name}&price=${b.price}&num=1&total=${b.price}">加入购物车</a>
			<button class="btn btn-danger" style="width: 150px;">去结算</button>
			   </p>				
			   </div>
			</div>
		   </c:forEach>

	<!--调用分页标签  -->
      <w:page pageBean="${pageBean}"></w:page>
      </div>
    </div>
  </body>
</html>

jsp页面搜索的主要代码：

在button按钮下增加一个onclick点击事件

<!-- 搜索栏 -->
<div class="row">
	<div class="col-sm-12 search-parent">
		<!-- 本来这里应该放一张背景图的 -->
		<div class="search"></div>
		<input type="text" id="book_name" name="name" value="" />
		<button onclick="search()" type="button" class="btn btn-primary">搜索</button>
	</div>
</div>

index.js

点击事件应用到的js代码

//书籍搜索
function search(){
   
	 var  ctx=$("#ctx").val();
	 location.href=ctx+"/book.action?methodName=search&name="+$("#book_name").val();
}

action层：

BookAction类

返回search页面需要进行跳转需要配置search结果码

package com.wangqiuping.action;

import java.sql.SQLException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequ

最低0.47元/天解锁文章

秃头程序汪

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
网上书城项目之书籍搜索、购物车的初步实现

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

扫一扫

专栏目录