网上书城_查询页面以及加入购物车功能实现

查询页面

关键字查询

通过书名关键字查询

代码

jsp页面

<!-- 搜索栏 -->
			<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-danger">搜索</button>
				</div>
			</div>

js文件
跳转页面，传递参数

function search(){
   
				location.href="${pageContext.request.contextPath}/book.action?methodName=search&name="+$("#book_name").val();
			}

action层
返回字符串（代表需要转发/重定向），这里返回search代表跳转到search页面

package com.wangjuanxia.web;
public class BookAction extends ActionSupport implements ModelDriver<Book>{
   

	private  Book  book=new Book();
	private  BookDao bookDao=new BookDao();
	
	@Override
	public Book getModel() {
   
//		 TODO Auto-generated method stub
		return book;
	}

	
	public String search(HttpServletRequest req,HttpServletResponse resp){
   
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		try {
   
			List<Book> list = this.bookDao.list(book, pageBean);
			req.setAttribute("books", list);
			req.setAttribute("pageBean", pageBean);
		} catch (InstantiationException e) {
   
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
   
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
   
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ParseException e) {
   
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return "search";
	}
	}

dao方法
判断关键字或类型id是否为空，不为空就给sql语句加上条件。

public  List<Book> list(Book book,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException, ParseException{
   
	String name=book.getName();
	long cid = book.getCid();
	int state=book.getState();
	String sql="select * from t_easyui_book where true";
	if(StringUtils.isNotBlank(name)) {
   
		sql+=" and name like '%"+name+"%'";
	}
	if(cid!=0) {
   
		sql+=" and cid="+cid;
	}
	return executeQuery(sql,Book.class,pageBean);
}

效果

类型查询

代码

jsp页面

<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
					</ul>
				</div>

js文件
增加一个点击事件，点击之后调用searchByType函数，跳转页面传递参数

$(function(){
   
var ctx=$("#ctx").val();
//加载左侧书籍类别
	$.ajax({
   
		url:ctx+'/category.action?methodName=list',
		success:function(data){
   
			data=eval('('+data+')');
			for (i in data) {
   
				$(".list-group").append('<li class="list-group-item" οnclick="searchByType('+data[i].id+')">'+data[i].name