您的位置:首页 > Web前端 > JavaScript

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

2017-09-13 09:40 399 查看
导航栏显示分类信息:

功能入口:页面加载完毕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;
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐