###Jsp+Servlet购物商城day02.1: 页面加载完,导航栏显示分类信息。(在公共页面head.jsp)

导航栏显示分类信息:

功能入口:页面加载完毕head.jsp发送Ajax请求;

处理过程:CategoryServlet;===无非是查询所有分类而已。很简单。关键是页面Ajax。

功能出口:head.jsp显示Ajax请求返回的Json数据。

===DOM操作,js遍历便利所有分类,获取DOM对象;给DOM对象 append子元素,并给子元素复制为当前遍历的 分类值。


功能入口:页面加载完毕head.jsp发送Ajax请求;

功能出口:head.jsp显示Ajax请求返回的Json数据。

===DOM操作,js遍历便利所有分类,获取DOM对象;给DOM对象 append子元素,并给子元素复制为当前遍历的 分类值。

都在一个页面。head.jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
	//===页面加载完成,触发一个函数
	 $(function(){
		$.post(
			"${pageContext.request.contextPath}/CategoryServlet",//请求路径
			{"method":"findAll"},//提交的数据
			function(v){
				//alert(v);
				//将数据设置进导航条 
				//<li><a href="#">电脑办公</a></li>
				for(var i = 0; i < v.length; i++){
					var cat = v[i];//{"cid":xxx,"cname":"yyyy"}
					$("#showCat").append("<li><a href='${pageContext.request.contextPath}/ProductServlet?method=findByCid&cid=" + cat.cid + "'>" + cat.cname + "</a></li>");
				}
			},//回调函数
			"json"//数据类型
		);
	}); 
	
	/* $(function(){
		alert("---");
		$.post(
		"${pagecontext.request.contextPath}/CategoryServlet",
		{"method":"findAll"},
		function(v){
			alert(v);
		}
		
		);
		
	}); */
</script>

<!--
         	描述:菜单栏
         -->
<div class="container-fluid">
	<div class="col-md-4">
		<img src="img/logo2.png" />
	</div>
	<div class="col-md-5">
		<img src="${pageContext.request.contextPath}/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="${pageContext.request.contextPath}/login.jsp">登录</a></li>
			<li><a href="${pageContext.request.contextPath}/register.jsp">注册</a></li>
		</c:if>	
		
		<c:if test="${not empty user }">
			<li>欢迎您:${user.username }</li>
			<li><a href="${pageContext.request.contextPath}/UserServlet?method=logout">登出</a></li>
		</c:if>	
			
			
			<li><a href="${pageContext.request.contextPath}/cart.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>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul id="showCat" class="nav navbar-nav">

				</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>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid -->
	</nav>
</div>


处理过程:CategoryServlet;无非是查询所有分类而已。很简单。关键是页面Ajax。

这里提一下:因为使用了前面刚学过的Redis。Redis可以只存在内存,不存在磁盘。所以应用之一就是作为程序缓存,提高程序运行效率。

代码如下:

package cn.itcast.servlet;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.service.CategoryService;
import cn.itcast.service.impl.CategoryServiceImpl;

public class CategoryServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;

	/*public String findAll(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
				return null;
	}	*/
	
	/*===这里是Ajax请求的方法,页面只是局部刷新。不需要页面跳转,只是响应一个Json格式字符串。
	所以返回值是void
	*/
	public void findAll(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		CategoryService service = new CategoryServiceImpl();
		String findAll = null;
		//System.out.println(findAll);
		try {
			findAll = service.findAll();
			//System.out.println(findAll);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(findAll);
	}
}
CategoryService:

package cn.itcast.service.impl;

import java.sql.SQLException;
import java.util.List;

import cn.itcast.domain.Category;
import cn.itcast.dao.CategoryDao;
import cn.itcast.dao.impl.CategoryDaoImpl;
import cn.itcast.service.CategoryService;
import cn.itcast.utils.JedisUtils;
import net.sf.json.JSONArray;
import redis.clients.jedis.Jedis;

public class CategoryServiceImpl implements CategoryService {

	@Override
	public String findAll() throws SQLException {
		
		//====v1
		//获取所有分类信息List<Category>
		CategoryDao dao = new CategoryDaoImpl();
		List<Category> list = dao.findAll();
		System.out.println(list);
		// 将List转为Json格式字符串。
		String json = JSONArray.fromObject(list).toString();
		
		
		/*//====v2==高效。(不便于测试)
		Jedis j = JedisUtils.getJedis();
		String json = j.get("CategoryJson");
		try {
			====Redis里的值,刷新8次,取不到了。(已测)===?
			===又没这个问题了。===可能是频繁切换 Redis的开启和关闭导致的。==###=很可能是Redis对象没有关闭流(close())。
			====会用就行。
			
			if (json==null) {//===第一次取值
				//获取所有分类信息List<Category>
				CategoryDao dao = new CategoryDaoImpl();
				List<Category> list = dao.findAll();
				System.out.println(list);
				// 将List转为Json格式字符串。
				json = JSONArray.fromObject(list).toString();
				j.set("CategoryJson", json);
			}
		} catch (Exception e) {
			throw new RuntimeException("Redis出错");
		}finally {
			JedisUtils.close(j);//===和数据流一样。
		}*/
		
		return json;
	}

}






  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值