案例19-页面使用ajax显示类别菜单

Posted 2020-10-24 jepson6669

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了案例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=0;i<data.length;++i){
                            content += "<li><a href=\'#\'>"+data[i].cname+"</a></li>";
                        }
                        //将拼接好的li放置到ul中
                        $("#categoryUl").html(content);
                    },
                 "json"    
                );
            });
        </script>
        
        
    </nav>
</div>

以上是关于案例19-页面使用ajax显示类别菜单的主要内容，如果未能解决你的问题，请参考以下文章

使用 ajax 通过 WordPress 菜单在 div 中按类别加载最新帖子

Ajax json jquery实现菜单案例

使用下拉菜单动态过滤 Wordpress 帖子（使用 php 和 ajax）

在页面内显示存档（在下拉列表中）和类别（在下拉列表中）

单击时清除 CSS 菜单悬停状态（通过 ajax 加载的页面）

Visualforce页面根据案例类别显示案例计数，单击每个类别我想获得案例的详细视图。怎么样？