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显示类别菜单的更多相关文章

  1. 案例20-页面使用redis缓存显示类别菜单

    1 准备工作 1  需要导入所需要的jar包. 2 启动windows版本的redis服务端 3 准备JedisUtils工具类的配置文件redis.properties redis.maxIdle= ...

  2. 页面进行ajax时 显示一个中间浮动loading

    先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...

  3. jsp页面通过ajax取值/展示数据及分页显示

    jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> function getComposition(pageno ...

  4. java结合jQuery.ajax实现左右菜单联动刷新列表内容

    http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...

  5. ajax“显示弹窗详情”和“删除”功能练习

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  6. 一个页面从输入url到页面加载显示完成，中间都经历了什么

    第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3 ...

  7. phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

    项目需求: 在html页面显示所有用户列表信息. 需求分析: 1. html页面使用ajax向后端php请求用户数据 2. php脚本查询数据库,并将查询后的结果以json格式返回前端html页面 3 ...

  8. JS 返回上一页并刷新，但不用重新加载整个页面（ajax实现）

    需求 有三个页面A.B.C,点击A=>B,点击B=>C,在C中添加内容,点击确定返回到B,此时B页面需重新加载新的内容.再次点击B的返回按钮,希望返回到A而不是C. ===== 2017/ ...

  9. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

随机推荐

  1. C++语言运算符的功能、优先级和结合性

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形参表)   . 成员选择(对象) 对象.成员名   -& ...

  2. redis整理の走进redis世界

    声明:原文摘自http://weibo.com/u/2446082491,谢谢他的分享! 在当前大型互联网应用以及提供云计算服务的时候,怎样保证系统在海量数据环境下的高性 能.高可靠性.高扩展性.高可 ...

  3. COLLATE 函数

    指定SQL server的排序规则Chinese_PRC指的是中国大陆地区,如果是台湾地区则为Chinese_TaiwanCI指定不区分大小写,如果要在查询时区分输入的大小写则改为CSAS指定区分重音 ...

  4. 性能测试工具Locust的使用----TaskSet类~~task任务嵌套

    内容来自网络 http://blog.sina.com.cn/s/blog_a7ace3d80102w9r0.html TaskSet类 正如字面意思,TaskSet类定义了每个用户的任务集合,测试任 ...

  5. iOS应用开发权限请求处理

    1.写在前面 APP开发避免不开系统权限的问题,如何在APP以更加友好的方式向用户展示系统权限,似乎也是开发过程中值得深思的一件事: 那如何提高APP获取iOS系统权限的通过率呢?有以下几种方式: 1 ...

  6. linux命令之磁盘与文件系统管理命令（上）

    1.fdisk:磁盘分区工具 该命令是linux下常用的磁盘分区工具,但是只能给小于2TB的磁盘划分分区. 常用参数为-l,显示所有磁盘分区的信息. 示例: 1)显示磁盘分区列表 [root@boxi ...

  7. “全栈2019”Java第八十章：外部类是否能实现本类中的接口？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. [ActionScript 3.0] 用TextField的方法getCharIndexAtPoint(x:Number, y:Number):int实现文字在固定范围内显示

    有时候我们遇到一行文字过多时必须固定文字的显示范围,但由于中英文所占字节数不一样,所以不能很好的用截取字符的方式去统一显示范围的大小,用TextField的getCharIndexAtPoint(x: ...

  9. jquery源码解析：pushStack，end，ready，eq详解

    上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...

  10. Azure File挂载报错--System Error 1231

    背景信息: 1.Azure 虚拟机与Azure File位于同一区域 2.同一Azure File可以挂载到别的同型号的虚拟机上使用,唯独挂载到问题机器(test01)时出现如下报错:System E ...