ajax实现无刷新分页的示例分析

这篇文章给大家分享的是有关ajax实现无刷新分页的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、始兴网站维护、网站推广。

1、Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态;

2、那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面;

3、实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示。

现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家。

代码如下:

一.html代码部分:

 
  
   
   序号 
   标题 
   地点 
   已报名 
   类别 
   操作 
   
 
 

 
 
首页 
上一页 
下一页 
尾页

二.ajax代码部分:

var pageSize = "10";//每页行数 
var currentPage = "1";//当前页 
var totalPage = "0";//总页数 
var rowCount = "0";//总条数 
var params="";//参数 
var url="activity_list.action";//action 
$(document).ready(function(){//jquery代码随着document加载完毕而加载 
 //分页查询 
 function queryForPages()
 { 
  $.ajax({ 
   url:url, 
   type:'post', 
   dataType:'json', 
   data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 
   success:function callbackFun(data)
   { 
    //解析json 
    var info = eval("("+data+")"); 
    //清空数据 
    clearDate(); 
    fillTable(info); 
   } 
  }); 
 } 
 //填充数据 
 function fillTable(info)
 { 
  if(info.length>1)
  { 
   totalPage=info[info.length-1].totalPage; 
   var tbody_content="";//不初始化字符串"",会默认"undefined" 
   for(var i=0;i"+(i+1+(currentPage-1)*pageSize)+"" 
    +""+info[i].title.substr(0,20)+"" 
    +""+info[i].address.substr(0,6)+"" 
    +""+info[i].quota_sign+"人" 
    +""+info[i].type+"" 
    +"/activity_edit.action?id="+info[i].id+"'>编辑" 
    +"" 
    $("#t_body").html(tbody_content); 
   } 
  }
  else
  { 
   $("#t_head").html(""); 
   $("#t_body").html(""+info.msg+"
");    }   }   //清空数据   function clearDate()  {    $("#t_body").html("");   }  //搜索活动   $("#searchActivity").click(function(){    queryForPages();  });   //首页   $("#firstPage").click(function(){    currentPage="1";    queryForPages();   });   //上一页   $("#previous").click(function(){    if(currentPage>1)   {     currentPage-- ;    }    queryForPages();   });   //下一页   $("#next").click(function(){    if(currentPage

什么是ajax

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

感谢各位的阅读!关于“ajax实现无刷新分页的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章名称:ajax实现无刷新分页的示例分析
标题URL:http://lszwz.com/article/gshdih.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款