网站首页 语言 会计 互联网计算机 医学 学历 职场 文艺体育 范文
当前位置:学识谷 > 设计制作 > 网页设计

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

栏目: 网页设计 / 发布于: / 人气:2.02W

今天请看yjbys小编带来的基于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;

adystatechange = function() {

if(yState==4){

lementById('d')rHTML = onseText;

}

}

("get",url);

(null);

}

//页面加载完成后,就调用该函数

ad = function(){

f1("");

}

</script>

</head>

<body>

<h2 align='center'>ajax实现无刷新分页</h2>

<p id='d'></p>

</body>

</html>

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

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

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

Tags:ajax 分页 刷新