ajax+json前端分页小范例
日期：2014-05-16 浏览次数：20392 次
ajax+json前端分页小实例
前端jsp
ajax_func.js
前端jsp
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>11111</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="function/ajax_func.js"></script>
<script language="javascript" src="function/json.js"></script>
<script language="javascript">
//页面加载，获取第一页的新闻列表
function winload() {
send_request("get","newsManager?currentPage=1",null,"XML",populateList);
}
//将所获取的新闻列表填充到页面的相应位置
function populateList() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var jsonCon = http_request.responseText.parseJSON();
var jsonObj = eval(jsonCon);
var currentPage = jsonObj.currentPage;
var totalPage = jsonObj.totalPage;
var prePage = parseInt(currentPage) - 1;
var nextPage = parseInt(currentPage) + 1;
var newslist = jsonObj.news;
var innerHTML = "";
if((newslist!=null)&&(newslist.length!=0)) {
innerHTML += "<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\">\r\n";
innerHTML += "<tr><td width='10%' height='25'>ID</td><td width='65%'>标题</td></tr>";
for(var i=0;i<newslist.length;i++) {
var id = jsonObj.news[i].id;
var title = jsonObj.news[i].name;
innerHTML += "<tr>";
innerHTML += "<td width='10%' height='25'>"+id+"</td>";
innerHTML += "<td width='65%' height='25'>"+title+"</td>";
innerHTML += "</tr>";
}
innerHTML += "</table>\r\n";
}else {
innerHTML += "暂时没有任何信息";
}
//Download by http://www.codefans.net
//window.alert(currentPage+"|"+nextPage+"|"+prePage+"|"+totalPage);
document.getElementById("newslist").innerHTML = innerHTML;
document.getElementById("prePage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+prePage+"')\">上一页</a>";
document.getElementById("nextPage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+nextPage+"')\">下一页</a>";
document.getElementById("lastPage").innerHTML="<a href=\"javascript:void(0)\" onClick=\"goToPage('"+totalPage+"')\">最末页</a>";
//window.alert(currentPage);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//页面跳转
function goToPage(page) {
send_request("get","newsManager?currentPage="+page,null,"XML",populateList);
}
</script>
</head>
<body onLoad="winload()">
<table width="500" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="center">1111</td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="center" height="200" valign="top">
<label id="newslist"></label>
</td>
</tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="center">
<label id="firstPage">[url=javascript:void(0)]第一页[/url]</label>
<label id="prePage">上一页</label>
<label id="nextPage">下一页</label>
<label id="lastPage">最末页</label>
</td>
</tr>
</table>
</body>
</html>
ajax_func.js
//定义XMLHttpRequest对象实例
var http_request = false;
//定义可复用的http请求发送函数
function send_request(method,url,content,responseType,callback) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { /
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
