微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Ajax作者：编程之家AI导航网

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 class='pagination' id='Pagination'>";
	private final String MINI_THEME_BEGIN = "<div class='paginationMini' id='PaginationMini'>";
	// 分页 div 结束
	private final String DEFAULT_THEME_END = "</div>";
	// 分页字符串
	private final String PAGE_A = "<a href=\"javaScript:void(0);\" onclick=\"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,total);
			String firstUrl = ctx;
			PageConf pageConfPrev = new PageConf(start,total);
			String prevUrl = ctx;
			PageConf pageConfNext = new PageConf(start,total);
			String nextUrl = ctx;
			PageConf pageConfLast = new PageConf(start,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,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,total);
		PageConf pageConfTemp1 = new PageConf(start,total);
		PageConf pageConfTemp2 = new PageConf(start,total);

		// 结束页
		PageConf pageConfTempLast = new PageConf(start,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 class='current'>");
				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 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' style='padding-top:50px'><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' style='padding-top:50px'><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>
	
	<ul>
    
    <s:iterator value="page.data" status="status">     
	<li id="comment_${id}_id" class="comlist">
	<div class="left" style="width: 65px;">
		<span class="headpic50">
		<a href="" class="tips"><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"/></a></span></div>
		<div style="margin-left: 65px;">
				<div style="padding-bottom: 20px;">
				<h3 class="tit_Critique lh25 mb5">
				<span class="right f12px mr5"><span>
				<a href="javaScript:void(0);" onclick="showReplay('${id}');">回复</a></span>
				</span>
				<a href="/thinksns/index.PHP?s=/space/1">管理员</a><em class="cGray2">37分钟前</em></h3>
				<p><s:property value="comment"/></p>
			</div>
            
			<span id="subComment_${id}_anchor_id"></span>
			<div id="subComment_${id}_id" class="subcomment">
<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#subComment_${id}_id").html("<div align='center' style='padding-top:50px'><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()+"/common/css/web/images");//重新设置缩写. %>
			
				<s:iterator value="page.data" status="subStatus"> 
				<div class="sublist pt5 clear" id="subComment_${parentId}_${subStatus.index}_id">
				<div class="left" style="width: 50px;">
				<span class="pic38"><a href="" class="tips" rel=""><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"></a></span>
					</div>
					<div style="margin-left: 50px;">
					<h3 class="tit_Critique lh20 mb5"><span class="right f12px mr5">
					<span class="ml5"><a href="###" onclick="deleteComment('${status.index}_${subStatus.index}')">删除</a></span>
					</span><a href="/thinksns/index.PHP?s=/space/1">管理员</a><em class="cGray2">37分钟前</em></h3>
					<p><s:property value="comment"/></p>
					</div>
					<div class="c"></div>
				</div>
				</s:iterator>
				<!-- 子回复框 Begin -->
				<input name="comment.parentId" id="replayParentId_${parentId}_id" type="hidden" value="${parentId}"/>
				<div style="display: none;" id="replaySubComment_${parentId}_id">
		          <div class="pt5 clear">
		            <div class="left" style="width: 50px;"><span class="pic38"><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" id="face"></span></div>
		            <div style="margin-left: 50px; overflow: hidden;">
		              <textarea id="replayTextarea_${parentId}_id" name="comment.comment" rows="4" style="width: 99%;" class="Text" onblur="this.className='Text'" onfocus="this.className='Text1'"></textarea>
		              <input type="submit" class="btn_b mt5" value="回 复" onclick="saveReplayComment('${parentId}');">
		              <input type="button" class="btn_w mt5" value="取消" onclick="hideReplay('${parentId}');"/>
		            </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' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'");
	$("#subComment_${parentId}_id").load(url,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 进行。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native