###Jsp+Servlet购物商城day02.1: 页面加载完,导航栏显示分类信息。(在公共页面head.jsp)
来源:互联网 发布:能找主奴的软件 编辑:程序博客网 时间:2024/06/05 06:02
导航栏显示分类信息:
功能入口:页面加载完毕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>
这里提一下:因为使用了前面刚学过的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 blocke.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 {@Overridepublic 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 0
- ###Jsp+Servlet购物商城day02.1: 页面加载完,导航栏显示分类信息。(在公共页面head.jsp)
- ###Jsp+Servlet购物商城day02.3:分页显示商品
- ###Jsp+Servlet购物商城day02.2:首页显示 最新和热门商品
- ###Jsp+Servlet购物商城day04.4:订单模块 【页面双层遍历】 显示本页所有订单。bootstrap分页下标。
- ###Jsp+Servlet购物商城day04.1:显示订单。【重中之重:查询3张表信息,封装到Order】
- ###Jsp+Servlet购物商城day02.4:商品详情 这个简单。不详述
- jsp显示页面加载时间
- 怎么在jsp页面加载时向Servlet发出请求
- 怎么在一个JSP页面打开时就加载servlet
- JSP在页面加载时调用servlet的方法
- Servlet中jsp在浏览器页面显示空白
- 在jsp页面显示struts中异常信息
- 在JSP页面中显示JavaBean属性信息
- Servlet实现JSP页面显示在线人数
- Servlet实现JSP页面显示在线人数
- jsp页面、servlet显示中文乱码详解
- jsp页面、Servlet显示乱码详解
- JSP,SERVLET 页面转发
- (一)、log4j
- 安全渗透测试笔记-----安全漏洞披露方式与安全漏洞公共资源库
- hue 安装
- bash shell : 删除文件的前几行
- opencv学习中——CvvImage类
- ###Jsp+Servlet购物商城day02.1: 页面加载完,导航栏显示分类信息。(在公共页面head.jsp)
- caffe siamese and ipython notebook
- 9月12 一些问题
- 关于产品经理的三个文档(PRD)(三)
- iframe的应用 实现无刷新用户注册
- ld链接器的链接选项(持续)
- Python基础-笔记篇
- Leetcode 221. Maximal Square
- quart简单使用