Ajax+Node分页
思路：
ajax分页：
1、服务器server.js,写布局;
2、写接口文档(不管客户端，只写服务器端接口)
3、写客户端，绑定数据，分页，优化点击过了，就不再请求；
4、给每个li绑定点击事件，跳转详情页面；自定义属性传参
5、cookie请求过的直接找缓存；
下面直接上代码index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="table">
<h2 class="head">
<span>学号</span>
<span>姓名</span>
<span>性别</span>
<span>分数</span>
</h2>
<ul class="list" id="pageList">
<!--<li>
<span>001</span>
<span>张三</span>
<span>女</span>
<span>80</span>
</li>
<li>
<span>002</span>
<span>李四</span>
<span>男</span>
<span>80</span>
</li>-->
</ul>
<div class="page" id="page">
<div class="first">首页</div>
<div class="prev">上一页</div>
<ul id="pageTip">
<!--<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>-->
</ul>
<div class="next">下一页</div>
<div class="last">末页</div>
<input id="userNum" type="number" step="1" min="1" max="8">
</div>
</div>
<script type="text/javascript">
//解析数据
function ajax(url, callback) {
var xhr = new XMLHttpRequest;
url.indexOf("?") > -1 ? url += "&_=" + Math.random() : url += "?_=" + Math.random();
xhr.open("get", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
callback && callback(JSON.parse(xhr.responseText));
}
};
xhr.send(null);
}
//绑定数据
var pageNum = 1, pageCount = 10, total = 0;
var pageList = document.getElementById("pageList"), pageTip = document.getElementById("pageTip"), tiplist = pageTip.getElementsByTagName("li");
var userNum = document.getElementById("userNum");
bindHTML(true);
function bindHTML(isFir) {
ajax('getData?Count=' + pageCount + '&Num=' + pageNum, function (data) {
isFir ? total = data['total'] : null;
data = data['list'];
//console.log(total);
//列表区域的数据绑定
var str1 = '', str2 = '';
for (var i = 0; i < data.length; i++) {
var curData = data[i];
str1 += "<li>";
str1 += "<span>" + curData["num"] + "</span>";
str1 += "<span>" + curData["name"] + "</span>";
str1 += "<span>" + (curData["sex"] == 1 ? "女" : "男") + "</span>";
str1 += "<span>" + curData["score"] + "</span>";
str1 += "</li>";
}
pageList.innerHTML = str1;
if (isFir) {
//给每个分页的li绑定点击背景改变
for (var i = 1; i <= total; i++) {
if (i === 1) {
str2 += "<li class='bg'>" + i + "</li>";
continue;
}
str2 += "<li>" + i + "</li>";
}
pageTip.innerHTML = str2;
}
});
//->让当前对应页码有选中的样式
for (var i = 0; i < tiplist.length; i++) {
tiplist[i].className = (i + 1) == pageNum ? "bg" : null;
}
userNum.value = pageNum;
}
//采用事件委托实现数据切换
document.getElementById("page").onclick = function (e) {
e = e || window.event;
var tar = e.target || e.srcElement;
//点击的是li
if (tar.tagName.toUpperCase() === "LI") {
if (parseFloat(tar.innerHTML) === pageNum) {
return;
}
pageNum = parseFloat(tar.innerHTML);
bindHTML();
return;
}
//点击的是div
if (tar.tagName.toUpperCase() === "DIV") {
var inn = tar.className;
if (inn === "first") {
if (pageNum === 1) {
return;
}
pageNum = 1;
} else if (inn === "last") {
if (pageNum === total) {
return;
}
pageNum = total;
} else if (inn === "prev") {
if (pageNum > 1) {
pageNum--;
}
} else if (inn === "next") {
if (pageNum < total) {
pageNum++;
}
}
bindHTML();
}
};
//处理文本框
userNum.onkeyup = function (e) {
//console.log(e.keyCode);
if (e.keyCode === 13) {
var val = parseFloat(userNum.value);
if (val === pageNum) {
return;
}
if (val < 1) {
userNum.value = 1;
pageNum = 1;
} else if (val > total) {
userNum.value = total;
pageNum = total;
} else {
pageNum = val;
}
bindHTML();
}
};
</script>
</body>
</html>
接下来是样式：css/index.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
-webkit-user-select: none;
}
ul li {
list-style: none;
}
.table {
width: 900px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 3px 3px 10px 0 pink;
overflow: hidden;
}
.table h2 {
height: 40px;
line-height: 40px;
background: lightblue;
}
.head span {
float: left;
width: 25%;
height: 100%;
text-align: center;
font-size: 18px;
}
.list {
height: 300px;
}
.list li {
height: 10%;
line-height: 30px;
}
.list li:nth-child(even){
background: #e1e1e1;
}
.list li:hover{
background: palegoldenrod;
}
.list li:active{
background: greenyellow;
}
.list span {
float: left;
width: 25%;
height: 100%;
text-align: center;
cursor: pointer;
}
.page {
margin-top: 20px;
float: right;
overflow: hidden;
}
.page div {
width: 50px;
}
.page ul {
float: left;
}
.page div, .page li, .page input {
margin-left: 5px;
height: 18px;
line-height: 18px;
float: left;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
cursor: pointer;
}
.page ul li {
float: left;
width: 20px;
}
.page ul li.bg{
background: cornflowerblue;
}
json文件夹里面包含一个创建data.json数据的js和data.json:
create.js：
/**
* Created by Administrator on 2016/5/17.
*/
var nameAry = ["赵一", "钱二", "孙三", "李四", "周五", "吴六", "郑七", "王八", "冯九", "陈十", "楚一", "魏二", "蒋三", "沈四", "韩五", "杨六"];
function getRandom(n, m) {
return Math.round(Math.random() * (m - n) + n);
}
var ary = [];
for (var i = 1; i <= 78; i++) {
var obj = {};
obj.num = (i >= 1 & i <= 9) ? "00" + i : ((i >= 10 & i <= 99) ? "0" + i : i);
obj.name = nameAry[getRandom(0, 15)];
obj.sex = getRandom(0, 1);
obj.score = getRandom(50, 100);
ary.push(obj);
}
console.log (JSON.stringify(ary));
data.json:
[
{
"num": "001",
"name": "楚一",
"sex": 1,
"score": 79
},
{
"num": "002",
"name": "王八",
"sex": 1,
"score": 96
},
{
"num": "003",
"name": "郑七",
"sex": 1,
"score": 56
},
{
"num": "004",
"name": "韩五",
"sex": 0,
"score": 89
},
{
"num": "005",
"name": "冯九",
"sex": 1,
"score": 56
},
{
"num": "006",
"name": "周五",
"sex": 1,
"score": 65
},
{
"num": "007",
"name": "陈十",
"sex": 1,
"score": 74
},
{
"num": "008",
"name": "郑七",
"sex": 1,
"score": 73
},
{
"num": "009",
"name": "吴六",
"sex": 0,
"score": 94
},
{
"num": "010",
"name": "吴六",
"sex": 0,
"score": 61
},
{
"num": "011",
"name": "王八",
"sex": 1,
"score": 77
},
{
"num": "012",
"name": "沈四",
"sex": 0,
"score": 50
},
{
"num": "013",
"name": "周五",
"sex": 0,
"score": 78
},
{
"num": "014",
"name": "吴六",
"sex": 0,
"score": 84
},
{
"num": "015",
"name": "吴六",
"sex": 0,
"score": 70
},
{
"num": "016",
"name": "韩五",
"sex": 0,
"score": 60
},
{
"num": "017",
"name": "吴六",
"sex": 0,
"score": 90
},
{
"num": "018",
"name": "冯九",
"sex": 1,
"score": 74
},
{
"num": "019",
"name": "周五",
"sex": 0,
"score": 62
},
{
"num": "020",
"name": "郑七",
"sex": 0,
"score": 67
},
{
"num": "021",
"name": "沈四",
"sex": 1,
"score": 74
},
{
"num": "022",
"name": "赵一",
"sex": 0,
"score": 58
},
{
"num": "023",
"name": "冯九",
"sex": 0,
"score": 55
},
{
"num": "024",
"name": "魏二",
"sex": 1,
"score": 87
},
{
"num": "025",
"name": "陈十",
"sex": 1,
"score": 73
},
{
"num": "026",
"name": "李四",
"sex": 0,
"score": 59
},
{
"num": "027",
"name": "王八",
"sex": 1,
"score": 54
},
{
"num": "028",
"name": "魏二",
"sex": 0,
"score": 59
},
{
"num": "029",
"name": "郑七",
"sex": 0,
"score": 84
},
{
"num": "030",
"name": "魏二",
"sex": 0,
"score": 80
},
{
"num": "031",
"name": "韩五",
"sex": 0,
"score": 73
},
{
"num": "032",
"name": "王八",
"sex": 0,
"score": 67
},
{
"num": "033",
"name": "魏二",
"sex": 1,
"score": 76
},
{
"num": "034",
"name": "吴六",
"sex": 0,
"score": 80
},
{
"num": "035",
"name": "王八",
"sex": 0,
"score": 100
},
{
"num": "036",
"name": "吴六",
"sex": 1,
"score": 65
},
{
"num": "037",
"name": "韩五",
"sex": 1,
"score": 53
},
{
"num": "038",
"name": "陈十",
"sex": 0,
"score": 93
},
{
"num": "039",
"name": "魏二",
"sex": 1,
"score": 56
},
{
"num": "040",
"name": "王八",
"sex": 0,
"score": 92
},
{
"num": "041",
"name": "沈四",
"sex": 1,
"score": 69
},
{
"num": "042",
"name": "沈四",
"sex": 0,
"score": 83
},
{
"num": "043",
"name": "吴六",
"sex": 1,
"score": 95
},
{
"num": "044",
"name": "楚一",
"sex": 0,
"score": 97
},
{
"num": "045",
"name": "郑七",
"sex": 0,
"score": 97
},
{
"num": "046",
"name": "王八",
"sex": 1,
"score": 51
},
{
"num": "047",
"name": "王八",
"sex": 0,
"score": 82
},
{
"num": "048",
"name": "冯九",
"sex": 1,
"score": 78
},
{
"num": "049",
"name": "郑七",
"sex": 1,
"score": 81
},
{
"num": "050",
"name": "孙三",
"sex": 1,
"score": 53
},
{
"num": "051",
"name": "孙三",
"sex": 1,
"score": 87
},
{
"num": "052",
"name": "沈四",
"sex": 1,
"score": 65
},
{
"num": "053",
"name": "魏二",
"sex": 0,
"score": 99
},
{
"num": "054",
"name": "冯九",
"sex": 0,
"score": 98
},
{
"num": "055",
"name": "周五",
"sex": 1,
"score": 58
},
{
"num": "056",
"name": "钱二",
"sex": 0,
"score": 76
},
{
"num": "057",
"name": "陈十",
"sex": 0,
"score": 57
},
{
"num": "058",
"name": "魏二",
"sex": 1,
"score": 100
},
{
"num": "059",
"name": "杨六",
"sex": 0,
"score": 96
},
{
"num": "060",
"name": "周五",
"sex": 1,
"score": 67
},
{
"num": "061",
"name": "蒋三",
"sex": 0,
"score": 74
},
{
"num": "062",
"name": "赵一",
"sex": 1,
"score": 59
},
{
"num": "063",
"name": "杨六",
"sex": 1,
"score": 72
},
{
"num": "064",
"name": "陈十",
"sex": 1,
"score": 87
},
{
"num": "065",
"name": "楚一",
"sex": 0,
"score": 77
},
{
"num": "066",
"name": "蒋三",
"sex": 0,
"score": 91
},
{
"num": "067",
"name": "杨六",
"sex": 0,
"score": 81
},
{
"num": "068",
"name": "冯九",
"sex": 1,
"score": 91
},
{
"num": "069",
"name": "吴六",
"sex": 0,
"score": 98
},
{
"num": "070",
"name": "杨六",
"sex": 1,
"score": 65
},
{
"num": "071",
"name": "王八",
"sex": 1,
"score": 76
},
{
"num": "072",
"name": "周五",
"sex": 1,
"score": 69
},
{
"num": "073",
"name": "魏二",
"sex": 1,
"score": 98
},
{
"num": "074",
"name": "韩五",
"sex": 1,
"score": 58
},
{
"num": "075",
"name": "钱二",
"sex": 0,
"score": 62
},
{
"num": "076",
"name": "钱二",
"sex": 0,
"score": 87
},
{
"num": "077",
"name": "赵一",
"sex": 0,
"score": 58
},
{
"num": "078",
"name": "冯九",
"sex": 1,
"score": 64
}
]
最后这个是server.js服务器：
/**
* Created by Administrator on 2016/5/17.
*/
var http = require("http");
var url = require("url");
var fs = require("fs");
var server = http.createServer(function (request, response) {
var urlObj = url.parse(request.url, true);
var pathname = urlObj.pathname;
var query = urlObj.query;
var reg = /\.(HTML|CSS|JS)/i;
if (reg.test(pathname)) {
var suffix = reg.exec(pathname)[1].toUpperCase();
var conType = suffix == 'HTML' ? 'text/html' : (suffix === 'CSS' ? 'text/css' : 'text/javascript');
var fileText = fs.readFileSync('.' + pathname);
response.writeHead(200, {'content-type': conType});
response.end(fileText);
return;
}
//写API接口：
if (pathname === '/getData') {
var Count = query.pageCount;
//console.log(pageCount);
var page = query.page;
var data = fs.readFileSync('./json/data.json', 'utf8');
data = JSON.parse(data);
var total = Math.ceil(data.length / query.Count);
var ary = [];
for (var i = (query.Num - 1) * query.Count; i <= (query.Num * query.Count) - 1; i++) {
//console.log(query);
var cur = data[i];
if (i > data.length-1) {
break;
}
ary.push(cur);
//console.log(cur);
}
response.writeHead(200, {'content-type': 'application/json; charset=utf8'});
response.end(JSON.stringify({'total': total, 'list': ary}));
}
});
server.listen(8888, function () {
console.log('8888端口监听成功');
});
服务器里面的端口号是8888，记得路径是localhost:8888/index.html
不要在该奋斗的年纪选择去偷懒，只有度过一段连自己都被感动了的日子，才会变成那个最好的自己.
