基于ajax实现无刷新分页的方法

本文实例讲述了基于ajax实现无刷新分页的方法。分享给大家供大家参考。具体如下：

在普通的分页中，一旦页码改变，则url改变，整个页面都会刷新，如果我们希望页码的改变不影响整个网页的变动，可以使用ajax技术。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

通过客户端html代码，用ajax把服务器中的数据通过get方式传递过来，显示在html中。

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>ajax实现无刷新分页</title>
 <script type="text/javascript">
  function f1(url){
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
      if(xhr.readyState==4){
        document.getElementById('d').innerHTML = xhr.responseText;
      }
    }
    xhr.open("get",url);
    xhr.send(null);
  }
  //页面加载完成后，就调用该函数
  window.onload = function(){
    f1("fenye-data.php");
  }
 </script>
 </head>
 <body>
  <h2 align='center'>ajax实现无刷新分页</h2>
  <div id='d'></div>
 </body>
</html>

在分页类中，我们只需更改超链接的地址，将原来的地址更改为通过js调用f1()方法，将链接传递给js中的f1()方法。

<a href='javascript:f1(\"{$this->uri}&page=".($this->page+1)."\")'>

进一步的，可以使用json实现无刷新效果的分页，与ajax相比，json将html和css都写在客户端，从而节省了服务器带宽，也使用户的请求速度加快，具体方法不再赘述。

希望本文所述对大家的Ajax程序设计有所帮助。

赞 (0)

相关推荐

  • ajax实现无刷新分页(php)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>投票结果</title> <meta http-equiv="content-type" content=&quo

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页

    ******生成js分页脚****** ****没剑(2008-03-05)**** 修改日期:2008-3-12 添加两个参数:displaynum,displaylastNum可以自由定制显示的页码数量 参数: pagesize:10 //每页显示的页码数 ,count:0 //数据条数 ,css:"mj_pagefoot" //分页脚css样式类 ,current:1 //当前页码 ,displaynum:7 //中间显示页码数 ,displaylastNum:5 //最后显示的

  • Ajax无刷新分页的性能优化方法

    Ajax无刷新分页的性能优化方法

    Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.cgi", method:"get", data:{p

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • asp.net使用AJAX实现无刷新分页

    查询功能是开发中最重要的一个功能,大量数据的显示,我们用的最多的就是分页. 在ASP.NET 中有很多数据展现的控件,比如Repeater.GridView,用的最多的GridView,它同时也自带了分页的功能.但是我们知道用GridView来显示数据,如果没有禁用ViewState,页面的大小会是非常的大的.而且平时我们点击首页,下一页,上一页,尾页这些功能都是会引起页面回发的,也就是需要完全跟服务器进行交互,来回响应的时间,传输的数据量都是很大的. AJAX的分页可以很好的解决这些问题. 数

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

    复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

  • php ajax无刷新分页,支持id定位

    <?php Header("Content-Type:text/html; charset=utf-8"); function AjaxPage($Total,$ListNub,$CurrentPage,$Url,$AjaxAction,$HalfPer='',$ViewId='') { //计算总页数 $totalPage = @ceil($Total/$ListNub); $total=$totalPage-1; $re=""; //echo $Curre

  • Flash & Ajax 操作 XML 实例:无刷新分页

    Flash & Ajax 操作 XML 实例:无刷新分页

    其实标题只是一个噱头罢了,只是想谈一下,Javascript 与 Actionscript 是如何操作XML的. 希望能帮助一些只用 Javascript  或 只懂 Actionscript 的朋友,了解两者的相同与不同之处. Flash 与 后台连接有许多种,Actionscript 调用 XML() 算是比较简单的一种了, 而Javascript 调用 xmlHttp ,便形成了现在很流行的Ajax了. 现在就用一个网上常出现的分页效果来对 Flash 和 Ajax 做个入门学习.效果预览

  • php+ajax实现无刷新分页的方法

    本文实例讲述了php+ajax实现无刷新分页的方法.分享给大家供大家参考.具体实现方法如下: 这是一款基于原生态的php +js +ajax 的分页程序实例,我们详细的从数据库创建到js,php,html页面的创建来告诉你如何实现ajax分页调用数据的方法. 具体步骤如下: 一.创建数据库 SQL语句如下: 复制代码 代码如下: CREATE TABLE `tb_user` (   `id` int(10) NOT NULL auto_increment,   `username` varcha

随机推荐