ajax动态加载

目标

主界面的书籍分类及书籍动态加载

代码演示

dao类

package com.zhoujun.dao;


import java.util.List;

import com.zhoujun.enetity.Book;
import com.zhoujun.util.BaseDao;
import com.zhoujun.util.PageBean;
import com.zhoujun.util.StringUtils;

public class BookDao extends BaseDao<Book> {
    // 门户新书上架的书籍
    public List<Book> newsBook(Book book, PageBean pageBean) throws Exception {
        String sql = "select * from t_easyui_book where state = 2 order by deployTime desc limit 12";
        return super.executeQuery(sql, pageBean, Book.class);
    }

    //门户热销书籍
    public List<Book> hotBook(Book book, PageBean pageBean) throws Exception {
        String sql = "select * from t_easyui_book where state = 2 order by sales desc limit 12";
        return super.executeQuery(sql, pageBean, Book.class);
    }

action类

   //    最新书籍
    public String news(HttpServletRequest request, HttpServletResponse response) {
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        try {
            List<Book> list = this.bookDao.newsBook(book, pageBean);
            ResponseUtil.writeJson(response, EasyuiResult.ok(pageBean.getTotal(), list));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    
    //    最热书籍
    public String hot(HttpServletRequest request, HttpServletResponse response) {
        PageBean pageBean = new PageBean();
        pageBean.setRequest(request);
        try {
            List<Book> list = this.bookDao.hotBook(book, pageBean);
            ResponseUtil.writeJson(response, EasyuiResult.ok(pageBean.getTotal(), list));
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

js代码

//    加载新书
    $.ajax({
        url: '${pageContext.request.contextPath}/category.action?methodName=list',
        success: function (data) {
            data = eval(data);
            // debugger;
            for (i in data) {
                $(".list-group").append('<li οnclick="searchByType('+ data[i].id+')" class="list-group-item">' + data[i].name + '</li>');
                $(".c-category li").ep(0).addClass('bg-color1');
                $(".c-category li:gt(0)").addClass('bg-color2');
                $(".c-category li:gt(0)").hover(function(){
                	$(this).addClass('bg-color1');
                },function(){
                	$(this).removeClass('bg-opacity');
                })
            }
        }
    });
    
        $.ajax({
    	url:ctx+'/book.action?methodName=news',
    	success:function(data){
        	data=eval('('+data+')');
//        	给news container所属的div添加row或者类
        	
        	/**
        	 * 1，给哪个div追加html内容
        	 * 2 最佳内容的数据来源
        	 * 3 标识当前是第几行内容
        	 * 最终追加的html
        	 */
        	appendBoodDiv($(".news"),data,0,"");
        }
    });
       function appendBookDiv($node,data,level,htmlstr){
    	var start=level * 6;
    	hemlstr += '<div class="row book"> ';
//    	data的数据12条
    	htmlstr +='<div class ="row book"';
    	for(i=start; i<statrt+6;i++){
    	 if(i==len) break;
    		htmlstr +='<div class="col-sm-2" style="width: 90px;">';
    		htmlstr +='<img src="'+data[i].image+'" >';
    		htmlstr +='<p>'+data[i].image+'</p>';
    		htmlstr +='<p>￥'+data[i].price+'</p>';
    		htmlstr +='</div>';
    	}
    	htmlstr += '</div>';
    	level++;
    	if(start+6>-len){
    		$node.append(htmlstr);
    	}else{
    		appendBoodDiv($node,data,level,htmlstr);
    	}
    	
    	
    }

结果