案例19-页面使用ajax显示类别菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了案例19-页面使用ajax显示类别菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8529字，纯文字阅读大概需要13分钟。
内容图文
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 {
publicvoid 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);
}
publicvoid 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 {
publicvoid 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);
}
publicvoid 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>
原文：https://www.cnblogs.com/jepson6669/p/8444086.html
内容总结
以上是互联网集市为您收集整理的案例19-页面使用ajax显示类别菜单全部内容，希望文章能够帮你解决案例19-页面使用ajax显示类别菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】