途牛旅游项目-导航条（页面显示）

目标：

思维导图：

如果jstl不能使用，需要导入jstl的依赖

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

pom.xml

<!--配置jstl--> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency>

CategoryServlet

package com.tuniu.web.servlet; import com.fasterxml.jackson.databind.ObjectMapper; import com.tuniu.domain.Category; import com.tuniu.domain.ResponseInfo; import com.tuniu.service.CategoryService; import com.tuniu.util.JedisUtil; import redis.clients.jedis.Jedis; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List; @WebServlet("/categoryServlet") public class CategoryServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doPost....run"); doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet....run"); Jedis jedis = JedisUtil.getJedis(); String json = jedis.get("category_list"); if (json != null) { System.out.println(json); response.getWriter().println(json); } else { CategoryService categoryService = new CategoryService(); List<Category> result = categoryService.findAll(); ResponseInfo responseInfo = new ResponseInfo(); responseInfo.setCode(200); responseInfo.setData(result); json = new ObjectMapper().writeValueAsString(responseInfo); response.getWriter().println(json); } } }

原本在页面中的导航条是写死的

现在我们动态的来显示，在header.jsp中加ajax

<script type="text/javascript"> $(function () { //页面加载成功之后执行 $.get( "categoryServlet", function (data) { //这个data就是服务器返回的字符串 if (data.code == 200) { var list = data.data; //定义一个变量，拼接导航的显示内容 li var lis = ""; //拼接第一项 lis += '<li class="nav-active"><a href="index.jsp">首页</a></li>' //循环所有的分类 for (var i = 0; i < list.length; i++) { //在js中，使用引号号表示字符串，避免生成转译的\ var li = '<li><a href="route_list.html">' + list[i].cname + '</a></li>' lis += li } //拼接最后一项 lis += ' <li><a href="favoriterank.html">收藏排行榜</a></li>' //显示在ul标签里面 $("#nav").html(lis) } }, "json" ); }) </script>

效果：

数据库：