网上书城_前端动态加载类别and书籍显示

动态加载类别

网页的类别菜单如果是静态的话，如果后期有改动就比较麻烦，而且不好操作，所有我们这里用的是动态加载类别菜单，
而动态加载类别后台实现也有两种方式

• 使用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();
	
	@