主页 > 编程资料 > Javascript >
发布时间:2016-01-01 作者:网络 阅读:209次

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/activity_edit.action?id="+info[i].id+"" else="" div="" style="height: 200px;width: 700px;padding-top: 100px;" align="center" function="" currentpage="">1)   {     currentPage-- ;    }    queryForPages();   });   //下一页   $("#next").click(function(){    if(currentPage<totalPage)   {     currentPage++ ;    }    queryForPages();   });   //尾页   $("#last").click(function(){    currentPage = totalPage;    queryForPages();   });  });

以上代码是小编给大家介绍的ajax实现的无刷新分页,希望对大家有所帮助。

关键字词: