ajax分页
2016-06-30 07:20
369 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
i{
font-style: normal;
display:inline-block;
width:31px;
height:31px;
font:bold 18px/31px "微软雅黑";
text-align:center;
}
h1{
text-align:center;
margin-bottom:20px;
}
li{
background-color:gold;
margin-bottom:20px;
}
.pagination{
text-align:center;
}
.pagination a{
border:1px solid red;
text-decoration: none;
display: inline-block;
width:30px;
height:30px;
font:bold 18px/30px "微软雅黑";
margin-left:10px;
}
.pagination a:hover{
background-color: gold;
}
.pagination a.active{
background-color: none;
border:none;
}
</style>
<script src="ourAjax.js"></script>
<script>
// page = 1
//start:起始页码 end表示终止页码
//'[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]
var currentPage = 1;
window.onload = function(){
var pagination = document.getElementById('pagination');
var ulList = document.getElementById('ulList');
ajax({ //页面加载完毕后请求服务器数据
method:"get",
url:"fenye.php",
data:{page:1}, //请求服务器数据page:1 成功返回[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]
success:function(datas){
//console.log(datas);
var arr = eval(datas);//数据请求成功后将返回的数据转化为可正常使用的数组 若返回为json对象 用JSON.parse()方法
//console.log(arr[0].data);
alert(arr);
crateDataInHTML(arr[0].data);//创建html页面元素 利用请求得到的arr[0].data数据 作为实参 调用创建html结构的函数
//创建页面条
createPagation(arr[0].start,arr[0].end);//创建页面条 实参为start end
},
error:function(mes){
alert(mes);
}
});
/*创建页码条*/
}
function createPagation(start,end){
var html = '';
for(var i = start;i<=end;i++){
if(currentPage==i){
html+='<i class="active" href="javascript:">'+i+'</i>';
}else{
html+='<a href="javascript:" onclick="goPage('+i+')">'+i+'</a>';//创建a标签的同时执行点击执行goPage(i)函数 i 为实参
}
}
pagination.innerHTML = html;
}
function crateDataInHTML(arr){
ulList.innerHTML = '';
for(var i = 0;i<arr.length;i++){
var item = arr[i];
var li = document.createElement("li");
li.innerHTML = '<h2>' +
'<a href="#">'+item.title+'</a>' +
'</h2>' +
'<p>'+item.desc+'</p>';
ulList.appendChild(li);
}
}
function goPage(p){//提交数据 page:p p=i=currentPage 请求点击当前页面的服务器数据 获得数据后执行 创建调用函数操作//同上
currentPage = p;
ajax({
method:"get",
url:"fenye.php",
data:{page:p},
success:function(datas){
//console.log(datas);
var arr = eval(datas);
//console.log(arr[0].data);
crateDataInHTML(arr[0].data);
//创建页面条
createPagation(arr[0].start,arr[0].end);
},
error:function(mes){
alert(mes);
}
});
}
</script>
</head>
<body>
<!--标题-->
<div>
<h1>数据列表</h1>
</div>
<!--数据列表和页码-->
<div>
<ul id="ulList">
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
</ul>
<div id="pagination" class="pagination">
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<i class="active" href="javascript:">1</i>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
</div>
</div>
</body>
</html>
/*引用的封装js*/
/*
实现ajax的工具
参数：
method:请求方式
url:请求的地址
isAsyc: 是否异步 true,异步。false,同步。
data: 表示传入的数据
success:function(data){
},
error:function(message){}
//{} key:value
o = {method:"get"}
{}
{
method:"",
url:"",
isAsyc:true,
data:{
userName:"admin",
pwd:"123",
gender:true
}
success:function(){}
error:function(){}
b50c
}
*/
function ajax(o){
var xr; //创建ajax对象
if(window.XMLHttpRequest){
xr = new XMLHttpRequest(); //创建ajax对象
}else{
xr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(o.isAsyc==undefined){//若没有传isAsyc 默认为异步提交
o.isAsyc = true;
}
var params = getParames(o.data);
if(o.method.toLowerCase()=="get"){ //get 请求
var date = new Date();
var time = date.getTime();
//&userName=admin&ped=123
xr.open(o.method,o.url + "?num=" + time + "&" + params,o.isAsyc);
xr.send();
}else{ //post请求
xr.open(o.method,o.url,o.isAsyc);
xr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交
xr.send(params);
}
if(o.isAsyc){ //异步需要监听事件
xr.onreadystatechange = function(){
if(xr.readyState==4){ //表示接受（会话）成功！并且数据完全解析成功！
if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
//success 函数 data
o.success(xr.responseText);
}else{
//xr.statusText 状态信息
o.error(xr.status + "-" + xr.statusText);
//alert(xr.status + "-" + xr.statusText);
}
}
}
}else{ //同步
if(xr.readyState==4){ //表示接受（会话）成功！并且数据完全解析成功！
if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
//success 函数 data
o.success(xr.responseText);
}else{
//xr.statusText 状态信息
o.error(xr.status + "-" + xr.statusText);
//alert(xr.status + "-" + xr.statusText);
}
}
}
}
/*
提交数据格式处理
*/
function getParames(params){
//userName=admin&ped=123&
var strFormat = '';
for(var property in params){
//key property
//value params[property]
strFormat = strFormat + property + "=" + params[property] + "&";
}
return strFormat.slice(0,strFormat.length-1);
}
/*请求的php文件*/
<?php
header("Content-type: text/html; charset=utf-8");
//print_r $_POST[pwd];
$r=(string)rand(1,100000);
if($_GET["page"]=="1"||$_GET["page"]=="2"||$_GET["page"]=="3"||$_GET["page"]=="4"||$_GET["page"]=="5"||$_GET["page"]=="6"){
echo '[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="7"){
echo '[{start:2,end:11,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="8"){
echo '[{start:3,end:12,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="9"){
echo '[{start:4,end:13,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="10"){
echo '[{start:5,end:14,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="11"){
echo '[{start:6,end:15,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="12"){
echo '[{start:7,end:16,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="13"){
echo '[{start:8,end:17,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="14"){
echo '[{start:9,end:18,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="15"){
echo '[{start:10 ,end:19,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="16"||$_GET["page"]=="17"||$_GET["page"]=="16"||$_GET["page"]=="18"||$_GET["page"]=="19"||$_GET["page"]=="20"){
echo '[{start:11 ,end:20,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
//echo $_GET["txt"];
?>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
i{
font-style: normal;
display:inline-block;
width:31px;
height:31px;
font:bold 18px/31px "微软雅黑";
text-align:center;
}
h1{
text-align:center;
margin-bottom:20px;
}
li{
background-color:gold;
margin-bottom:20px;
}
.pagination{
text-align:center;
}
.pagination a{
border:1px solid red;
text-decoration: none;
display: inline-block;
width:30px;
height:30px;
font:bold 18px/30px "微软雅黑";
margin-left:10px;
}
.pagination a:hover{
background-color: gold;
}
.pagination a.active{
background-color: none;
border:none;
}
</style>
<script src="ourAjax.js"></script>
<script>
// page = 1
//start:起始页码 end表示终止页码
//'[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]
var currentPage = 1;
window.onload = function(){
var pagination = document.getElementById('pagination');
var ulList = document.getElementById('ulList');
ajax({ //页面加载完毕后请求服务器数据
method:"get",
url:"fenye.php",
data:{page:1}, //请求服务器数据page:1 成功返回[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]
success:function(datas){
//console.log(datas);
var arr = eval(datas);//数据请求成功后将返回的数据转化为可正常使用的数组 若返回为json对象 用JSON.parse()方法
//console.log(arr[0].data);
alert(arr);
crateDataInHTML(arr[0].data);//创建html页面元素 利用请求得到的arr[0].data数据 作为实参 调用创建html结构的函数
//创建页面条
createPagation(arr[0].start,arr[0].end);//创建页面条 实参为start end
},
error:function(mes){
alert(mes);
}
});
/*创建页码条*/
}
function createPagation(start,end){
var html = '';
for(var i = start;i<=end;i++){
if(currentPage==i){
html+='<i class="active" href="javascript:">'+i+'</i>';
}else{
html+='<a href="javascript:" onclick="goPage('+i+')">'+i+'</a>';//创建a标签的同时执行点击执行goPage(i)函数 i 为实参
}
}
pagination.innerHTML = html;
}
function crateDataInHTML(arr){
ulList.innerHTML = '';
for(var i = 0;i<arr.length;i++){
var item = arr[i];
var li = document.createElement("li");
li.innerHTML = '<h2>' +
'<a href="#">'+item.title+'</a>' +
'</h2>' +
'<p>'+item.desc+'</p>';
ulList.appendChild(li);
}
}
function goPage(p){//提交数据 page:p p=i=currentPage 请求点击当前页面的服务器数据 获得数据后执行 创建调用函数操作//同上
currentPage = p;
ajax({
method:"get",
url:"fenye.php",
data:{page:p},
success:function(datas){
//console.log(datas);
var arr = eval(datas);
//console.log(arr[0].data);
crateDataInHTML(arr[0].data);
//创建页面条
createPagation(arr[0].start,arr[0].end);
},
error:function(mes){
alert(mes);
}
});
}
</script>
</head>
<body>
<!--标题-->
<div>
<h1>数据列表</h1>
</div>
<!--数据列表和页码-->
<div>
<ul id="ulList">
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
<li>
<h2>
<a href="#">数据1</a>
</h2>
<p>数据1描述数据1描述数据1描述</p>
</li>
</ul>
<div id="pagination" class="pagination">
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<i class="active" href="javascript:">1</i>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
<a href="javascript:">1</a>
</div>
</div>
</body>
</html>
/*引用的封装js*/
/*
实现ajax的工具
参数：
method:请求方式
url:请求的地址
isAsyc: 是否异步 true,异步。false,同步。
data: 表示传入的数据
success:function(data){
},
error:function(message){}
//{} key:value
o = {method:"get"}
{}
{
method:"",
url:"",
isAsyc:true,
data:{
userName:"admin",
pwd:"123",
gender:true
}
success:function(){}
error:function(){}
b50c
}
*/
function ajax(o){
var xr; //创建ajax对象
if(window.XMLHttpRequest){
xr = new XMLHttpRequest(); //创建ajax对象
}else{
xr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(o.isAsyc==undefined){//若没有传isAsyc 默认为异步提交
o.isAsyc = true;
}
var params = getParames(o.data);
if(o.method.toLowerCase()=="get"){ //get 请求
var date = new Date();
var time = date.getTime();
//&userName=admin&ped=123
xr.open(o.method,o.url + "?num=" + time + "&" + params,o.isAsyc);
xr.send();
}else{ //post请求
xr.open(o.method,o.url,o.isAsyc);
xr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟表单提交
xr.send(params);
}
if(o.isAsyc){ //异步需要监听事件
xr.onreadystatechange = function(){
if(xr.readyState==4){ //表示接受（会话）成功！并且数据完全解析成功！
if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
//success 函数 data
o.success(xr.responseText);
}else{
//xr.statusText 状态信息
o.error(xr.status + "-" + xr.statusText);
//alert(xr.status + "-" + xr.statusText);
}
}
}
}else{ //同步
if(xr.readyState==4){ //表示接受（会话）成功！并且数据完全解析成功！
if(xr.status==200){ //真正意义的成功！后端返回数据完全正常，并且没有错误
//success 函数 data
o.success(xr.responseText);
}else{
//xr.statusText 状态信息
o.error(xr.status + "-" + xr.statusText);
//alert(xr.status + "-" + xr.statusText);
}
}
}
}
/*
提交数据格式处理
*/
function getParames(params){
//userName=admin&ped=123&
var strFormat = '';
for(var property in params){
//key property
//value params[property]
strFormat = strFormat + property + "=" + params[property] + "&";
}
return strFormat.slice(0,strFormat.length-1);
}
/*请求的php文件*/
<?php
header("Content-type: text/html; charset=utf-8");
//print_r $_POST[pwd];
$r=(string)rand(1,100000);
if($_GET["page"]=="1"||$_GET["page"]=="2"||$_GET["page"]=="3"||$_GET["page"]=="4"||$_GET["page"]=="5"||$_GET["page"]=="6"){
echo '[{start:1,end:10,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="7"){
echo '[{start:2,end:11,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="8"){
echo '[{start:3,end:12,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="9"){
echo '[{start:4,end:13,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="10"){
echo '[{start:5,end:14,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="11"){
echo '[{start:6,end:15,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="12"){
echo '[{start:7,end:16,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="13"){
echo '[{start:8,end:17,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="14"){
echo '[{start:9,end:18,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="15"){
echo '[{start:10 ,end:19,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
if($_GET["page"]=="16"||$_GET["page"]=="17"||$_GET["page"]=="16"||$_GET["page"]=="18"||$_GET["page"]=="19"||$_GET["page"]=="20"){
echo '[{start:11 ,end:20,total:20,data:[{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"},{title:"数据' . " " . $r. " " .'",desc:"数据描述。。。"}]}]';
}
//echo $_GET["txt"];
?>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用jQuery中的ajax分页实现代码
- 用jQuery中的ajax分页实现代码
- jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
- 解析CI的AJAX分页 另类实现方法
- AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件，支持多样式多数据绑定
- jquery+css3打造一款ajax分页插件(自写)
- .Net读取AD中的用户并使用BootstrapTable的ajax分页
- jQuery、Ajax分页
- js分页控件（适合ajax）
- PHP之 AJAX分页
- 电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java
- 电子商务系统的设计与实现(十三)：分页组件，从前到后，从JS到Java
- mybatis分页插件使用案例（前端bootstrap）
- 结合豆瓣搜索结果进行分页（完整）
- 一款不错的jQuery分页插件--pagination
- ajax的知识点剖析
- $.ajax实现原理（封装ajax）
- Ajax分页
- ajax步骤、状态码、get/post方式区别、封装ajax函数
- 封装ajax