jquery+php无刷新分页

最新推荐文章于 2025-08-12 16:19:53 发布

nanyswing

最新推荐文章于 2025-08-12 16:19:53 发布

阅读量144

点赞数

分类专栏： javascript 文章标签： PHP jQuery JavaScript json Ajax ViewUI

javascript 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了一种使用Ajax和jQuery实现局部刷新分页的方法，提高了用户体验。通过POST方式提交请求获取JSON数据，并利用each()和html()函数动态生成HTML代码完成页面更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页是经常用到的功能，这次用局部刷新分页提高用户体验，

其实就是通过ajax提交然后用js处理返回的数据并替换页面中的html代码。用到了jquery里面的post提交返回数据类型为json。和each()函数html()函数等。

//分页显示
function PageIndex(actid,pgid)//参数为查找的id和页码
{
	jQuery.ajax({
		type:"POST",
		url:"/praise/ajaxpage",
		dataType: 'json',
		data:"sid="+actid+"&pg="+pgid,
		success:function(msg){
		
		var arrPage = msg.page;
		var arrData = msg.data;

		var htmlfans = "";
		var htmlpag = "";
		var activeimgurl = jQuery("#activeimgurl").val();	
		
		var type,feetype;
		 jQuery(arrData).each(function(){ 	
			 	
			 htmlfans = htmlfans + "<div class=\"imgDiv\">";
			 htmlfans = htmlfans + "<a href=\"http://cyworld.ifensi.com/ps3/index.php?mh_id="+this.user_id+"\" target=\"_blank\"><img src=\"http://i.ifensi.com/icon.php?uid="+this.user_id+"&size=small\" width=\"50\" height=\"50\"/></a>";
			 htmlfans = htmlfans + "<input onclick=\"unselectall()\" type=\"checkbox\" name=\"check1[]\"  value="+this.user_id+" class=\"input\"/><a href=\"http:\/\/cyworld.ifensi.com\/ps3\/index.php?mh_id=\""+this.user_id+"\" target=\"_blank\">"+this.user_name+"</a>";
			 htmlfans = htmlfans + "</div>";    		
		 });  		
		 
		 if (arrPage.mRecordCount>0)//拼接html语句的时候注意转义
			{
			htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+",1)\">首页</a><a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mPreviousPage+")\">上一页</a>";
			htmlpag = htmlpag + "<div>";
		           
		    for (var j = 1 ; j <=arrPage.mPageCount; j ++)
			{ 
				if(arrPage.mPage==j)
				{
					htmlpag = htmlpag + "<span class=\"thispage\">"+arrPage.mPage+"</span>";
				}
				else
				{
					htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+","+j+")\">"+j+"</a>";
				}	
			}
		    htmlpag = htmlpag + "</div>";
			htmlpag = htmlpag + "<a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mNextPage+")\">下一页</a><a href=\"javascript:PageIndex("+msg.actid+","+arrPage.mPageCount+")\">尾页</a>";
			}
		
	  jQuery("#blb_fanslist").html(htmlfans);
	  jQuery("#blb_paginator").html(htmlpag);
	}	
	}
	);
}

php程序比较简单，只要把查询的结果以echo json_encode($arrFans);的方式输出就可以了。