案例19-页面使用ajax显示类别菜单
1 版本一
版本只能在首页显示类别,当切换到了其它页面就不会显示
1 web层IndexServlet代码
package www.test.web.servlet; import java.io.IOException;
import java.sql.SQLException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import www.test.domain.Category;
import www.test.domain.Product;
import www.test.service.ProductService; public class IndexServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ProductService service = new ProductService(); //获取热门商品-----List<Product>
List<Product> hotProductList = null;
try {
hotProductList = service.findHotProductList();
} catch (SQLException e) { e.printStackTrace();
} //获取最新商品-----List<Product>
List<Product> newProductList = null;
try {
newProductList = service.findNewProductList();
} catch (SQLException e) { e.printStackTrace();
} //准备分类数据
List<Category> categoryList =null;
try {
categoryList = service.findAllCategory();
} catch (SQLException e) { e.printStackTrace();
}
request.setAttribute("categoryList", categoryList); //将获取的数据存入request域
request.setAttribute("hotProductList", hotProductList);
request.setAttribute("newProductList", newProductList); //转发
request.getRequestDispatcher("/index.jsp").forward(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
2 service层代码
//获取商品分类
public List<Category> findAllCategory() throws SQLException {
ProductDao dao = new ProductDao();
List<Category> categoryList = dao.findAllCategory();
return categoryList;
}
3 dao层代码
//获取商品分类
public List<Category> findAllCategory() throws SQLException {
QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
String sql = "select * from category";
List<Category> categoryList = qr.query(sql, new BeanListHandler<Category>(Category.class));
return categoryList;
}
4 heaher.jsp代码修改
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png"/>
</div> <div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<c:if test="${empty user }">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.jsp">注册</a></li>
</c:if>
<c:if test="${!empty user }">
<li>欢迎您,${user.username }</li>
<li><a href="#">退出</a></li>
</c:if> <li><a href="cart.jsp">购物车</a></li>
<li><a href="order_list.jsp">我的订单</a></li>
</ol>
</div>
</div> <!-- 导航条 -->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="categoryUl"> <c:forEach items="${categoryList }" var="category">
<li><a href="#">${category.cname }</a>
</c:forEach> </ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
</div>
2 版本二使用ajax显示类别菜单
版本二中可以实现所有页面的类别的动态获取.原来IndexServlet里面获取类别数据的代码不在需要了
新编写一个CategoryListServlet.
1 web层CategoryListServlet代码
package www.test.web.servlet; import java.io.IOException;
import java.sql.SQLException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import www.test.domain.Category;
import www.test.service.ProductService; public class CategoryListServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ProductService service = new ProductService(); // 准备分类数据
List<Category> categoryList = null;
try {
categoryList = service.findAllCategory();
} catch (SQLException e) { e.printStackTrace();
}
//使用转换工具将categoryList转换成json格式
Gson gson = new Gson();
String json = gson.toJson(categoryList); //将转换后的json格式字符串写出
//写回前先解决乱码问题
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(json); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
service的代码和dao的代码与版本一一样
2 header.jsp代码修改
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!-- 登录 注册 购物车... -->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png"/>
</div> <div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<c:if test="${empty user }">
<li><a href="login.jsp">登录</a></li>
<li><a href="register.jsp">注册</a></li>
</c:if>
<c:if test="${!empty user }">
<li>欢迎您,${user.username }</li>
<li><a href="#">退出</a></li>
</c:if> <li><a href="cart.jsp">购物车</a></li>
<li><a href="order_list.jsp">我的订单</a></li>
</ol>
</div>
</div> <!-- 导航条 -->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="categoryUl">
<%-- 不在需要了使用后面的ajax解决问题 --%>
<%-- <c:forEach items="${categoryList }" var="category">
<li><a href="#">${category.cname }</a>
</c:forEach> --%> </ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div> <!-- 实现引入header.jsp页面的所有页面都动态获取类别 -->
<script type="text/javascript">
//header.jsp加载完毕后 去服务器端获得所有的category数据
//引入header.jsp的页面本身已经引入的jquery文件,所以不用再次引入
$(function(){
var content = "";
$.post(
"${pageContext.request.contextPath}/categoryList",
function(data){
//[{"cid":"xxx","cname":"xxxx"},{},{}]
//动态创建<li><a href="#">${category.cname }</a></li>
for(var i=;i<data.length;++i){
content += "<li><a href='#'>"+data[i].cname+"</a></li>";
}
//将拼接好的li放置到ul中
$("#categoryUl").html(content);
},
"json"
);
});
</script> </nav>
</div>
案例19-页面使用ajax显示类别菜单的更多相关文章
- 案例20-页面使用redis缓存显示类别菜单
1 准备工作 1 需要导入所需要的jar包. 2 启动windows版本的redis服务端 3 准备JedisUtils工具类的配置文件redis.properties redis.maxIdle= ...
- 页面进行ajax时 显示一个中间浮动loading
先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...
- jsp页面通过ajax取值/展示数据及分页显示
jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> function getComposition(pageno ...
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
- ajax“显示弹窗详情”和“删除”功能练习
1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...
- 一个页面从输入url到页面加载显示完成,中间都经历了什么
第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...
- phpStudy4——前端页面使用Ajax请求并解析php返回的json数据
项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...
- JS 返回上一页并刷新,但不用重新加载整个页面(ajax实现)
需求 有三个页面A.B.C,点击A=>B,点击B=>C,在C中添加内容,点击确定返回到B,此时B页面需重新加载新的内容.再次点击B的返回按钮,希望返回到A而不是C. ===== 2017/ ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
随机推荐
- Java NIO学习-详细内容(二)
五.Selector与SelectionKey Selector是SelectableChannel 对象的多路复用器,为什么使用Selector? 仅用单个线程来处理多个Channels的好处是,只 ...
- vmware虚拟机监控数据
在vsphere产品中内建一个监控所有虚机包括主机资源的插件,叫做vcenter servcie status,这个插件的主要功能是记录当前虚拟机资源的cpu.硬盘.内存和网络等相关信息.通过它可以查 ...
- 织梦CMS让channelartlist标签支持currentstyle【转】
打开include\taglib\channelartlist.lib.php找到 $pv->Fields['typeurl'] = GetOneTypeUrlA($typeids[$i]); ...
- EasyFastCMS系列教学课程——1、三层框架的搭建
在本系列教程中,我们以一个大型CMS系统的完整开发流程为例,和大家一起探讨net开发的经验和教训.在本程序中,我们采用了流行的三层/N层框架+仓储模式的架构模式.项目分层示意图: 各层的主要用 ...
- UML uml基础知识
uml基础知识 一.了解: uml是Unified Modeling Language的缩写,意思是统一建模语言或标准建模语言. UML规范用来描述建模的概念有,类(对象的).对象.关联.职责.行为. ...
- 【QTP专题】05_参数化之Excel
QTP使用外部Excel实现参数化主要有以下两种方式 导入到DataTable中 Syntax:DataTable.ImportSheet(FileName, SheetSource, SheetDe ...
- 动态添加select的option [转载]
动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...
- [网络流24题] 最长K可重区间集问题
题目链接:戳我 当时刷24题的时候偷了懒,没有写完,结果落下这道题没有写qwq结果今天考试T3中就有一部分要用到这个思想,蒟蒻我硬是没有想到网络流呜呜呜 最大费用流. 就是我们考虑将问题转化一下,转化 ...
- [转]解读Unity中的CG编写Shader系列7——漫反射
如果前面几个系列文章的内容过于冗长缺乏趣味着实见谅,由于时间原因前面的混合部分还没有写完,等以后再补充,现在开始关于反射的内容了.折射与反射在物理世界中,光的反射与折射往往是同时存在的,光源由真空或者 ...
- leecode刷题(10)-- 旋转图像
leecode刷题(10)-- 旋转图像 旋转图像 描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维 ...