zl程序教程

您现在的位置是:首页 >  工具

当前栏目

sns 评论ajax分页 和 二级评论ajax 分页 ssh2 实现 源码下载

源码下载AJAX 实现 分页 评论 二级
2023-09-11 14:21:14 时间

 sns 评论 ajax 分页 和二级 评论 ajax 分页 ssh2 实现 源码下组 jar 在jar_1 jar_2 下载 数据 mysql测试可以

 

 

 

经过周六日的研究 终于弄明白 ajax 分页的实现了。

 

基本上就是利用了 jquery 的一个函数 

 

 

$("#id").load(url,function() {});

 

 

首先 进入 评论页面 - load 评论 ,评论 再 - load 子评论。

 

按照 组件开发的方式  编写分页标签。

 

 

package com.freewebsys.core.sns.taglib;

import javax.servlet.jsp.JspException;

import javax.servlet.jsp.tagext.TagSupport;

import com.freewebsys.core.sns.page.PageConf;

public class PageTaglib extends TagSupport {

 private String id;// 标识不同分页,当一个页面有多个分页时,

 private String action;

 private int start;

 private int limit;

 private int total;

 private String otherValue;

 private String theme;

 // 默认 分页跳转 js.兼容写法。兼容刷新分页 和 ajax分页。都调js函数。ajax要重写 goPage函数

 private static final String DEFAULT_PAGE_JS = " script type=text/javascript function goPage(url){location.href = url;} /script 

 // 分页 div 开始

 private final String DEFAULT_THEME_BEGIN = " div id=Pagination 

 private final String MINI_THEME_BEGIN = " div id=PaginationMini 

 // 分页 div 结束

 private final String DEFAULT_THEME_END = " /div 

 // 分页字符串

 private final String PAGE_A = " a href=\"javaScript:void(0);\" "goPage(";

 // 默认样式模板

 @Override

 public int doStartTag() throws JspException {

 try {

 if (total = limit) {// 如果还不够一页 就不显示

 return super.doEndTag();

 // 初始化参数.每次独立计算.否则分页有问题.

 PageConf pageConf = new PageConf(start, limit, total);

 String ctx = pageContext.getServletContext().getContextPath() + "/";

 ctx += action;

 if (action.indexOf("?") = 0) {// 如果存在?号用 

 ctx += " " + findOtherValue();

 } else {// 否则用?

 ctx += "?" + findOtherValue();

 PageConf pageConfFirst = new PageConf(start, limit, total);

 String firstUrl = ctx;

 PageConf pageConfPrev = new PageConf(start, limit, total);

 String prevUrl = ctx;

 PageConf pageConfNext = new PageConf(start, limit, total);

 String nextUrl = ctx;

 PageConf pageConfLast = new PageConf(start, limit, total);

 String lastUrl = ctx;

 // pageContext.setAttribute("gridPanelWidth", width);

 // pageContext.setAttribute("gridPanelHeight", height);

 if (pageConf.hastPrevious()) {

 pageConfFirst.getFirst();

 firstUrl += " start=" + pageConfFirst.getStart();

 pageConfPrev.getPrevious();

 prevUrl += " start=" + pageConfPrev.getStart();

 if (pageConf.hasNext()) {

 pageConfNext.getNext();

 nextUrl += " start=" + pageConfNext.getStart();

 pageConfLast.getLast();

 lastUrl += " start=" + pageConfLast.getStart();

 // 直接将数据写到页面

 String str = genCenterButtons(start, limit, total, ctx);

 if (theme == null || theme.equals("")) {

 writeToPage(DEFAULT_PAGE_JS);// 默认跳转函数

 writeToPage(DEFAULT_THEME_BEGIN);

 writeToPage(str);

 } else if (theme.equals("ajax")) {// 普通ajax分页

 writeToPage(DEFAULT_THEME_BEGIN);

 writeToPage(str);

 } else if (theme.equals("miniAjax")) {// mini型ajax分页

 writeToPage(MINI_THEME_BEGIN);

 if (id != null) {//标识不用分页

 str = str.replace("goPage", "goMiniPage_" + id);

 } else {

 str = str.replace("goPage", "goMiniPage");

 writeToPage(str);

 // 如果是ajax就要在页面重写goPage函数

 writeToPage(DEFAULT_THEME_END);

 } catch (Exception e) {

 e.printStackTrace();

 return super.doEndTag();

 * 生成多个跳转按钮方法,如1,2,3,4,5这样的按钮跳转最大7页跳转

 private String genCenterButtons(int start, int limit, int total, String ctx) {

 // 初始化参数.每次独立计算.否则分页有问题.

 PageConf pageConf = new PageConf(start, limit, total);

 PageConf pageConfTemp1 = new PageConf(start, limit, total);

 PageConf pageConfTemp2 = new PageConf(start, limit, total);

 // 结束页

 PageConf pageConfTempLast = new PageConf(start, limit, total);

 pageConfTempLast.getLast();

 // 字符串拼写.

 StringBuilder strOut = new StringBuilder();

 // 设置开始为当前页往前3页,最小1

 int begin = Math.max(1, (pageConf.getCurrentPage() + 1) - 3);

 // 设置结束为当前页往后3页,最大到总页数

 int end = Math.min((pageConf.getCurrentPage() + 1) + 3,

 pageConf.getTotalPage());

 int abs = 5 - Math.abs(pageConfTempLast.getCurrentPage()

 - pageConf.getCurrentPage());

 if (abs 0) {

 begin = pageConf.getCurrentPage() - abs;

 begin = Math.min(begin, (pageConf.getCurrentPage() + 1) - 3);

 begin = Math.max(1, begin);

 // 计算当前页和首页的距离

 abs = 7 - pageConf.getCurrentPage();

 if (abs 0) {

 end = pageConf.getCurrentPage() + abs;

 end = Math.max((pageConf.getCurrentPage() + 1) + 3, end);

 end = Math.min(end, pageConf.getTotalPage());

 if (pageConf.getTotalPage() 7) {// 如果大于7显示首页末页

 // 显示前一页

 if (pageConfTemp1.hastPrevious()) {

 pageConfTemp1.getPrevious();

 strOut.append(PAGE_A + ctx + " start="

 + pageConfTemp1.getStart() + ");\" 

 strOut.append("上一页 /a 

 if (pageConf.getCurrentPage() 3) {

 // 显示第 1

 strOut.append(PAGE_A + ctx + " start=" + (0) + ");\" 

 strOut.append(1);

 strOut.append(" /a 

 if (pageConf.getCurrentPage() 4) {

 // 显示第 2 页

 strOut.append(PAGE_A + ctx + " start="

 + (0 + pageConf.getLimit()) + ");\" 

 strOut.append(2);

 strOut.append(" /a 

 strOut.append("…");

 // if(pageConf.getCurrentPage())

 // 循环显示数字

 for (int i = begin; i = end; i++) {

 // 循环多个table的button

 int startTemp = (i - 1) * pageConf.getLimit();

 if (i == (pageConf.getCurrentPage() + 1)) {

 strOut.append(" span 

 strOut.append(i);// 当前页显示禁用

 strOut.append(" /span 

 } else {

 strOut.append(PAGE_A + ctx + " start=" + startTemp + ");\" 

 strOut.append(i);

 strOut.append(" /a 

 // 末页显示,显示最后一页和倒数第二页

 if (pageConf.getTotalPage() 7) {// 如果大于7显示首页末页

 if (pageConf.getCurrentPage() (pageConfTempLast.getCurrentPage() - 3)) {

 // 如果当前页是倒数第4页就不显示

 strOut.append("…");

 // System.out.println(pageConf.getCurrentPage() + "/"

 // + pageConfTempLast.getCurrentPage());

 if (pageConf.getCurrentPage() (pageConfTempLast

 .getCurrentPage() - 4)) {

 // 如果当前页是倒数第4页就不显示倒数第2页

 strOut.append(PAGE_A

 + ctx

 + " start="

 + (pageConfTempLast.getStart() - pageConf

 .getLimit()) + ");\" 

 strOut.append(pageConfTempLast.getCurrentPage());

 strOut.append(" /a 

 strOut.append(PAGE_A + ctx + " start="

 + pageConfTempLast.getStart() + ");\" 

 strOut.append(pageConfTempLast.getCurrentPage() + 1);

 strOut.append(" /a 

 // 显示下一页

 if (pageConfTemp2.hasNext()) {

 pageConfTemp2.getNext();

 strOut.append(PAGE_A + ctx + " start="

 + pageConfTemp2.getStart() + ");\" 

 strOut.append("下一页 /a 

 return strOut.toString();

 * 添加其他参数.

 private String findOtherValue() {

 String tempValue = "";

 if (otherValue != null !"".equals(otherValue)) {

 // 将数据按照,进行分开.

 String[] values = otherValue.split(",");

 for (int i = 0; i values.length; i++) {

 // 从request里面取得数据value.

 String temp = (null == pageContext.getRequest().getParameter(

 values[i]) ? "" : pageContext.getRequest()

 .getParameter(values[i]));

 if (i == 0) {// 如果是第一个.直接等于.否则就添加 

 tempValue = values[i] + "=" + temp;

 } else {

 tempValue += " " + values[i] + "=" + temp;

 return tempValue;

 @Override

 public int doEndTag() throws JspException {

 try {

 // 读取模板

 // writeToPage(" !--GridPanelPage结束-- // 完成一个h3不读取模板

 } catch (Exception e) {

 e.printStackTrace();

 return super.doEndTag();

 private void writeToPage(String strOut) {

 try {

 pageContext.getOut().print(strOut);

 } catch (Exception e) {

 e.printStackTrace();

....get set 方法略..

 

用来生成 分页标签 其中分页参数 是pageconf

 

 

package com.freewebsys.core.sns.page;

import java.util.List;

 * 分页类开始.*./ /** 排序字段.

public class PageConf {

 private String sortField;

 /** 排序升降.des,aesc. */

 private String sortDir;

 /** 分页开始. */

 private int start;

 /** 分页结束. */

 private int end;

 /** 每页最大数. */

 private int limit;

 /** 分页总数. */

 private int total;

 private List data;

 public List getData() {

 return data;

 public void setData(List data) {

 this.data = data;

 public int getCurrentPage() {

 return (int) Math.floor((double) start / limit);

 public int getTotalPage() {

 /** 取得总共的页数. */

 return (int) Math.ceil((double) total / limit);

 public void getGo(int page) {/* 页面跳转函数.输入要跳转的页面. */

 System.out.println("page:[" + page);

 int totalPage = getTotalPage();

 int currentPage = getCurrentPage();

 if (page = 1) {/* 如果小于1.跳到首页. */

 getFirst();

 return;

 } else if (page = totalPage) {/* 如果大于总页数跳到末页. */

 getLast();

 return;

 } else if (page == currentPage) {/* 当前页返回. */

 return;

 } else {/* 否则进行页面跳转.也就是计算start和end. */

 this.start = (page - 1) * limit;

 this.end = Math.min(page * limit, total);

 // System.out.println("getGo:[" + toString());

 public void getNext() {

 // System.out.println("getNextPage");

 int currentPage = getCurrentPage();

 int tempStart = (currentPage + 1) * limit;

 if (tempStart = total) {

 return;

 this.start = tempStart;

 this.end = Math.min((currentPage + 2) * limit, total);

 // System.out.println("getNext" + toString());

 public void getFirst() {

 // System.out.println("getFirst");

 this.start = 0;

 this.end = Math.min(limit, total);

 // System.out.println("getFirst" + toString());

 public void getLast() {

 // System.out.println("getEnd");

 int lastPage = getTotalPage();

 /** 如果刚好总页数刚好被整除.就往前一页. */

 if ((lastPage * limit) = total) {

 lastPage--;

 this.start = lastPage * limit;

 this.end = Math.min((lastPage + 1) * limit, total);

 // System.out.println("getLast" + toString());

 public void getPrevious() {

 // System.out.println("getPreviouspage");

 int currentPage = getCurrentPage();

 /** 前一页等于当前页数乘以每页记录数. */

 this.start = Math.max((currentPage - 1) * limit, 0);

 this.end = Math.max((currentPage) * limit, limit);

 // System.out.println("getPrevious" + toString());

 public boolean hasNext() {

 // System.out.println("hasNext" + toString());

 if (this.end == this.total) {

 return false;

 } else if (this.getTotalPage() = 1) {

 return false;

 } else {

 return true;

 public boolean hastPrevious() {

 // System.out.println("hastPrevious" + toString());

 if (this.start == 0) {

 return false;

 } else {

 return true;

 public PageConf(int start, int limit, int total) {/* 构造函数.设置开始.和分页数. */

 this.start = start;

 this.limit = limit;

 // 重新计算end.

 int currentPage = getCurrentPage();

 this.end = Math.min((currentPage + 1) * limit, total);

 this.total = total;

 // System.out.println("PageConf" + toString());

....get set 方法略..

}

 


 

  显示底部评论分页


 显示二级评论的小分页

 

 %@ page language="java" import="java.util.*" pageEncoding="UTF-8"% 

 %@ taglib prefix="s" uri="/struts-tags"% 

 %@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"% 

 %request.setAttribute("ctx",request.getContextPath());//重新设置缩写. % 

 %request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. % 

 script type="text/javascript" 

function showReplay(objId){//{status.index}

 $(#replaySubComment_+objId+_id).toggle();

 $(#replayTextarea_+objId+_id).focus();

function hideReplay(objId){//{status.index}

 $(#replaySubComment_+objId+_id).hide();

function saveReplayComment(objId){

 if($(#replayTextarea_+objId+_id).val() == ){

 alert(请输入评论内容。);

 $.ajax({

 url:saveComment.html,

 type:"POST",

 data:{

 appType:${appType},

 appId:${appId},

 parentId:$(#replayParentId_+objId+_id).val(),

 commentContent:$(#replayTextarea_+objId+_id).val()},

 success:function(data){//回调函数

 if(data == 1){

 $(#replayTextarea_+objId+_id).val();

 $(#replaySubComment_+objId+_id).hide();

 //重新加载子分页

 var parentId = $(#replayParentId_+objId+_id).val();

 $("#subComment_"+objId+"_id").html(" div align=center img src=${img_ctx}/loading_blue_big.gif /div 

 $("#subComment_"+objId+"_id").load("${ctx}/listSubComment.html?appType=${param.appType} appId=${param.appId} parentId="+parentId,function() {

 $(html,body).animate({scrollTop: $("#comment_"+objId+"_id").offset().top}, 1);

function goPage(url){

 //加载 loading 图片

 $("#comment_id").html(" div align=center img src=${img_ctx}/loading_blue_big.gif /div 

 $("#comment_id").load(url,function() {

 $(html,body).animate({scrollTop: $("comment_anchor_id").offset().top}, 1);

//-- 

 /script 

 s:iterator value="page.data" status="status" 

 li id="comment_${id}_id" 

 div 

 span 

 a href="" img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"/ /a /span /div 

 div 

 div 

 span span 

 a href="javaScript:void(0);" 回复 /a /span 

 /span 

 a href="/thinksns/index.php?s=/space/1" 管理员 /a em 37分钟前 /em /h3 

 p s:property value="comment"/ /p 

 /div 

 span id="subComment_${id}_anchor_id" /span 

 div id="subComment_${id}_id" 

 script type="text/javascript" 

$(document).ready(function(){

 $("#subComment_${id}_id").html(" div align=center img src=${img_ctx}/loading_blue_big.gif /div 

 $("#subComment_${id}_id").load("${ctx}/listSubComment.html?appType=${param.appType} appId=${param.appId} parentId=${id}",function() {});

//-- 

 /script 

 /div 

 /div 

 /li 

 /s:iterator 

 /ul 

 fsns:page action="listComment.html" otherValue="appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="ajax"/ 

 上面是评论分页load jsp 页面。

 

 %@ page language="java" import="java.util.*" pageEncoding="UTF-8"% 

 %@ taglib prefix="s" uri="/struts-tags"% 

 %@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"% 

 %request.setAttribute("ctx",request.getContextPath());//重新设置缩写. % 

 %request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. % 

 s:iterator value="page.data" status="subStatus" 

 div id="subComment_${parentId}_${subStatus.index}_id" 

 div 

 span a href="" rel="" img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" /a /span 

 /div 

 div 

 h3 span 

 span a href="###" 删除 /a /span 

 /span a href="/thinksns/index.php?s=/space/1" 管理员 /a em 37分钟前 /em /h3 

 p s:property value="comment"/ /p 

 /div 

 div /div 

 /div 

 /s:iterator 

 !-- 子回复框 Begin -- 

 input name="comment.parentId" id="replayParentId_${parentId}_id" type="hidden" value="${parentId}"/ 

 div id="replaySubComment_${parentId}_id" 

 div 

 div span img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" id="face" /span /div 

 div 

 textarea id="replayTextarea_${parentId}_id" name="comment.comment" rows="4" onblur="this.className=Text" onfocus="this.className=Text1" /textarea 

 input type="submit" value="回 复" 

 input type="button" value="取消" / 

 /div 

 /div 

 /div 

 !-- 子回复框 End -- 

 fsns:page id="${parentId}" action="listSubComment.html" otherValue="parentId,appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="miniAjax"/ 

 script type="text/javascript" 

function goMiniPage_${parentId}(url){

 //加载 loading 图片

 $("#subComment_${parentId}_id").html(" div align=center img src=${img_ctx}/loading_blue_big.gif /div 

 $("#subComment_${parentId}_id").load(url,function() {

 $(html,body).animate({scrollTop: $("#subComment_"+objId+"_anchor_id").offset().top}, 1);

//-- 

 /script 

 

上面是 子评论 分页的  load的 jsp 页面。

 

 

整个 页面的样式 是 参考 thinksns  的评论的样式的。

使用的技术 是 ssh2 数据库 是mysql。

 

protected String appType;// 应用类型 如blog

 

protected Integer appId;// 应用Id

 

可以设计 针对 不同应用 进行评论。


 

 

打算利用  自己独立 开发一个 类似于 替换 thinksns 的社区。

界面 没有美工 就参考 thinksns 数据也部分参考 thinksns  然后 按照模块 进行分布开发。

 

前端 用 jquery 和 jqueryui 进行。