动态加载类别
网页的类别菜单如果是静态的话,如果后期有改动就比较麻烦,而且不好操作,所有我们这里用的是动态加载类别菜单,
而动态加载类别后台实现也有两种方式
- 使用c:forEach标签
- 使用ajax
相比较之下,if,else代码比较多,而且加载网页的时候可能会出现卡顿延迟;而ajax它会先显示网页,数据可以后续跟上,局部加载刷新,比如京东,淘宝网页。
代码
jsp页面
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item" style="color: white;">书籍分类</li>
</ul>
</div>
js文件
$(function(){
var ctx=$("#ctx").val();
//加载左侧书籍类别
$.ajax({
url:ctx+'/category.action?methodName=list',
success:function(data){
data=eval('('+data+')');
for (i in data) {
$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
$(".c-category li").eq(0).addClass('bg-color1');
$(".c-category li:gt(0)").addClass('bg-color2');
$(".c-category li:gt(0)").hover(function() {
$(this).addClass('bg-opacity');
}, function() {
$(this).removeClass('bg-opacity');
});
}
}
});
});
mvc配置
<?xml version="1.0" encoding="UTF-8"?>
<config>
<action path="/category" type="com.wangjuanxia.web.CategoryAction"></action>
</config>
action
package com.wangjuanxia.web;
public class CategoryAction extends ActionSupport implements ModelDriver<Category>{
private Category category=new Category();
private CategoryDao cd=new CategoryDao(