溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Ajax如何讀取數(shù)據(jù)并分頁顯示，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
我覺得還是有必要把我的ajax分頁呈現(xiàn)給大家．我先講一下這個ajax分頁的實現(xiàn)核心，然后我們再看實例效果．所謂的ajax分頁與傳統(tǒng)的數(shù)據(jù)分頁，在服務端的代碼基本上是一樣的．我們主要做的是使用ajax在不刷新的情況下，將請求的頁碼，和每頁要顯示的條數(shù)發(fā)送給服務端的處理網頁．大家點擊這個網址就可以看到要請求的數(shù)據(jù)："ajax_page.asp?action=read&pagecount=3 & current_page=1"
在這段URL里，pagecount代表每頁要顯示幾條數(shù)據(jù)，current_page代表要請求的頁碼．服務端就是根據(jù)這兩個參數(shù)來傳回你想要請求的數(shù)據(jù)．下
這是前端的ajax代碼：
復制代碼 代碼如下:
<html>
<head>
<title>ajax數(shù)據(jù)分頁</title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
li{
list-style:none;
border:1px solid;
width:20px;
height:20px;
text-align:center;
margin:5px;
padding:2px;
float:left;
cursor:pointer;
}
</style>
</head>
<body>
默認顯示每頁為5條數(shù)據(jù)，你可以在下面文本框設置每頁的顯示條數(shù)<hr/>
輸入每頁要顯示的條數(shù):<input id="edit_count" type="text" /> <input type="button" type="button" value="確定" onclick="Read()"/>
<table border="1"><!--該表格用來顯示數(shù)據(jù)內容-->
<thead><tr><td>編號</td><td>內容</td></tr></thead>
<tbody id="a"></tbody>
</table>
<span id="msg" ></span>
<br/>
<ul id="page"><!--頁導航-->
</ul>
<script type="text/javascript">
var All_page;//總頁數(shù)
var All_record;//總條數(shù)
var Current_page;//當前頁
var PageCount;//每頁顯示的條數(shù)
function ajax_xmlhttp(){
//在IE中創(chuàng)建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環(huán)創(chuàng)建基于IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器，則創(chuàng)建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//獲取元素函數(shù)
function $(elem){
return typeof elem == "string" ? document.getElementById(elem) : elem;
}
//讀取數(shù)據(jù)函數(shù)
function Read(){
if(arguments.length!=0){//如果有參數(shù)傳遞過來，則證明你點擊了某個頁碼
var e = arguments[0] || window.event; //標準化事件對象
var obj = e.target || e.srcElement; //獲取事件對象,你點擊的那個頁碼元素
Current_page = parseInt(obj.innerHTML);//獲取元素中的數(shù)字值，證明你要請求的是第幾頁
$("msg").innerHTML = "當前為第"+Current_page+"頁";//提示信息：當前請求的頁
}
PageCount = $("edit_count").value;//獲取文本框的值
if(PageCount.length == 0){ //如果文本框為空
PageCount = 5; //默認每頁顯示5條數(shù)據(jù)
}
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量．
ajax.open("post","ajax_page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);//設置請求方式，請求的網頁，url的action參數(shù)為read，異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經寫好的函數(shù)名稱
if(ajax.readyState == 4){//數(shù)據(jù)返回成功
if(ajax.status == 200){//http請求狀態(tài)碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數(shù)據(jù)，并保存在xmlData變量里
All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;
All_page = All_Record / PageCount;
var page_list = $("page");
while(page_list.childNodes.length!=0){
page_list.removeChild(page_list.childNodes[0]);
}
for(var i=0;i<Math.ceil(All_page);i++){ //動態(tài)創(chuàng)建頁碼列表
var li = document.createElement("li");
li.innerHTML = i+1;//因為i以0開始，所以要+1顯示頁碼
li.onclick = function(e){Read(e)};//為每個li的頁碼綁定單擊事件
page_list.appendChild(li);//將生成好的頁碼元素放到div里
}
var list = xmlData.getElementsByTagName("list");//在返回的數(shù)據(jù)里，獲取所有l(wèi)ist標簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數(shù)據(jù)的表格
while(t.rows.length!=0){ //在讀取數(shù)據(jù)時如果表格已存在行．一律刪除
t.removeChild(t.rows[0]);
}
for(var i=0;i<list.length;i++){
var tr = t.insertRow(t.rows.length);//有幾個list就為表格增加幾行．
var td = tr.insertCell(0);//第一個單元格存放數(shù)據(jù)編號
td.innerHTML = list[i].childNodes[0].firstChild.nodeValue;
var td = tr.insertCell(1);//第二個單元格存放數(shù)據(jù)內容
td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);//提交請求，參數(shù)為null
}
Read();//運行Read函數(shù)
</script>
</body>
</html>
上面是本次ajax分頁教程的前端代碼，html部份我們就不講了．直接開始script中的內容．首先我們定義了4個全局變量，分別是：
All_page：總頁數(shù)，創(chuàng)建頁碼的根據(jù)
All_Record：數(shù)據(jù)總條數(shù)，All_Record/PageCount=All_page 得到總頁數(shù)
Current_page：當前請求的頁碼．傳送給服務端
PageCount：每頁顯示的條數(shù)，傳送給服務端
然后依次是我寫的3個自定義函數(shù)，分別為：
ajax_xmlhttp();該函數(shù)的作用是創(chuàng)建一個可用的XMLHTTPRequest對象，如果你還不知道什么是XMLHTTPRequest．請了解什么是XMLHTTPRequest
$(elem);獲取元素的函數(shù)，根據(jù)頁面中元素的id來對某個元素的引用，其實就是document.getElementById的縮寫與引用，寫成函數(shù)以后直接可以使用$("元素id")即可獲取該元素．
Read()：讀取數(shù)據(jù)的函數(shù)．也是我們的老朋友了，在前幾篇的教程里都有使用．下面我們仔細來分析下，這一次我們在Read()函數(shù)里做了些什么．
(1)：if(arguments.length!=0)這是在判斷在調用Read()函數(shù)時，是否有參數(shù)傳遞過來．如果有參數(shù)，則證明你點擊了某個頁碼而觸發(fā)了Read()．這時我們應該獲取該頁碼，將頁碼數(shù)字賦值給Crrent_page變量．點擊了解：arguments
(2)：var e = arguments[0] || window.event;標準化事件對象，arguments[0]是為了FF瀏覽器，window.event是IE瀏覽器
(3)：var obj = e.target || e.srcElement;標準了事件對象以后，我們要獲取事件的源．也就是說是那個元素觸發(fā)了Read()函數(shù)．此時的obj就是你點擊的那個頁碼元素．
(4)：Current_page = parseInt(obj.innerHTML);獲取元素中的數(shù)字值，證明你要請求的是第幾頁，在下面的請求中會把該值發(fā)送給服務端．
(5)：PageCount = $("edit_count").value;獲取文本框里的值，如果你沒有向文本框里輸入值．那么每頁默認顯示5條數(shù)據(jù)．再聲明一次，以前講過的內容我們不再重復講解．也就是說關于上面的代碼我在該教程里沒有解釋到的．在以前的教程里會找到相關解釋．
(6)：ajax.open("post","ajax_page.asp?action=read&pagecount="+PageCount+"& current_page="+Current_page,true);我們在請求的Url里將Pagecount與Current_page變量傳遞給了服務端，服務端接收到這兩個變量以后會經過判斷．如果PageCount為空那么將默認為5．如果Current_page為空則默認為第1頁，然后會將相應的數(shù)據(jù)傳回給客戶端．
(7)：All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;從服務端接收一個allrecord標簽元素．該元素包含了一個數(shù)字值，該數(shù)字值是數(shù)據(jù)的總條數(shù)．
(8)：All_page = All_Record / PageCount;用總條數(shù)All_Record除以PageCount等于總頁，得出有幾頁數(shù)據(jù)以后．我們會根據(jù)All_page來創(chuàng)建當前頁碼列表．
(9)：var page_list = $("page");獲取存放頁碼列表的那個div元素．while(page_list.childNodes.length!=0)循環(huán)遍歷該div內的子元素．將其子元素全部刪除．每次根據(jù)當前頁顯示的條數(shù)不同，會生成不同的頁碼，所以必須刪除上次請求生成的頁碼列表，當然你也可以改進我這種做法！如果你還不了解什么是子元素或如何刪除子元素，請參閱：childNodes與removeChild
(10)：for(var i=0;i < Math.ceil(All_page);i++);使用一個for循環(huán)根據(jù)總頁數(shù)來動態(tài)的生成頁碼列表，如果All_page為5，則生成5個頁碼．因為考慮到了會有余數(shù)．我使用了Math.ceil．如果你還不知道Math與ceil的作用，請參閱：Math與ceil
(11)：var li = document.createElement("li");創(chuàng)建一個li元素，并賦值給一個名字為li的變量．li.innerHTML= i+1;在li元素內寫入頁碼數(shù)值．因為i是從0開始的，所有要加1．
(12)：li.onclick = function(e){Read(e)};為每個li元素綁定單擊事件，這個是重點必須要理解清楚．我們向li綁定了Read(e)函數(shù)，并且利用e參數(shù)傳遞了事件對象．當你點擊每個頁碼的時候會再次觸發(fā)Read函數(shù)來讀取數(shù)據(jù)．這個時候運行的Read(e)函數(shù)，是帶有參數(shù)的．我們正是從參數(shù)內獲得了你請求的頁碼，然后賦值給Current_page，利用url發(fā)送給了服務端．
你注意一下在script腳本部份里的最后一行：Read();此時Read()沒有參數(shù)，并且只有當打開頁面或刷新頁面時才會執(zhí)行這個Read()，此時的Read()向服務端發(fā)送的Current_page是空的．PageCount默認是5，這個時候服務端接收到空的頁碼，只會讀取5條數(shù)據(jù)給你．與此同時我也從服務端接收了數(shù)據(jù)的總條數(shù)，利用總條數(shù)除以每頁顯示的條數(shù)．創(chuàng)建了頁碼．并且為每個頁碼綁定了 Read(e)函數(shù)．只有當你點擊這些頁碼時帶有參數(shù)的Read(e)再次執(zhí)行數(shù)據(jù)讀?。藭r的讀取已經向服務端發(fā)送了頁碼．你明白了嗎？
(13)：page_list.appendChild(li);為li寫好了頁碼，綁定了事件以后添加到上面被獲取的div元素里．請參閱：appendChild
哦了，上面講述的部份是本次ajax分頁教程中前端的核心部份，沒有講述的內容在前幾篇的ajax教程里都有講解．下面我們來看下服務端的源碼并分析該源碼
復制代碼 代碼如下:
<!--#include file="Conn.Asp"-->
<%
'出自：http://Www.Web666.Net
'作者：康董
'如需轉載請務必保留以上信息
'定義一個變量，來保存xml數(shù)據(jù)
xml="<?xml version='1.0' encoding='gb2312'?><body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執(zhí)行什么操作
Select case action
case "read" '如果為read則執(zhí)行讀取數(shù)據(jù)的操作
Call Read
case else
xml = xml&"<msg>請求參數(shù)錯誤，請不要試圖非法操作！</msg>"
End Select
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End
Sub Read '自定義的讀取數(shù)據(jù)過程
Call OpenConn '打開數(shù)據(jù)庫鏈接
Current_Page = Request("Current_Page") '當前的頁碼
PageCount = request("PageCount") '當前頁顯示的條數(shù)
xml = xml&"<page>"&pagecount&"</page>"
If Current_Page = "" Or Not IsNumEric(Current_Page) Then
Current_Page = 1
End If
If PageCount = "" Or Not IsNumEric(PageCount) Then '判斷條數(shù)輸入是否正確
PageCount = 5
End If
Sql = "Select count(*) From page_table" '讀取page_table表中共有多少條數(shù)據(jù)
Set Rs = Conn.Execute(Sql) '執(zhí)行sql語句
xml = xml&"<allrecord>"&Rs(0)&"</allrecord>"
If Current_Page = 1 Then '如果是第１頁
Sql = "Select Top "&PageCount&" * From page_table order by id desc"
Else
Sql = "Select Top "&PageCount&" * From page_table where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc)) order by id desc"
End If
Set Rs=Conn.Execute(Sql)
While Not Rs.Eof
xml = xml&"<list>"
xml = xml&"<id>"&Rs("id")&"</id>"
xml = xml&"<content>"&Rs("content")&"</content>"
xml = xml&"</list>"
Rs.MoveNext '下一條
Wend
End Sub
%>
上面是本次ajax分頁教程實例中請求的服務端網頁源碼．我在服務端使用的是Asp技術，當然你也可以使用jsp,php,.net等輕松模擬．關于在服務端輸出xml數(shù)據(jù)．在前幾篇的ajax教程里我都有講解．所以我們從該源碼中的Read讀取過程開始講起：
1、Current_Page = Request("Current_Page") ：接收客戶端ajax使用url參數(shù)傳遞過來的Current_page，請求的頁碼
2、PageCount = Request("PageCount") ：接收客端ajax使用url參數(shù)傳遞過來的PageCount，每頁顯示的條數(shù)
3、然后分別判斷Current_Page是否為空．或者是否為數(shù)字．如果不符合條件．則將Current_page等于1．如果PageCount也為空，或者不是數(shù)字，則將PageCount等于5，也就是每頁讀取5條數(shù)據(jù)
4、Sql = "Select count(*) From page_table"這條sql的作用是讀取表內一共有多少條數(shù)據(jù)，也就是我們在前端代碼所說的總條數(shù)．將這個總條數(shù)讀取以后并保存在一個allrecord的元素里．然后傳回給客戶端．客戶端每次讀取數(shù)據(jù)都會獲取這個數(shù)字．以該數(shù)字為依據(jù)，進行頁碼的創(chuàng)建．
5、If Current_Page = 1 Then 判斷Cruuent_Page是否為1，如果為1則執(zhí)行：Sql = "Select Top "&PageCount&" * From page_table order by id desc" 該sql語句的意思很簡單，只讀取表內的"PageCount"條數(shù)據(jù)．如果你在前端沒有設置要讀取的條數(shù)．那么 PageCount等于5，也就是只讀取5條數(shù)據(jù)．讀取順序為desc，倒序讀取！
6、Else如果Crrent_Page不等于1,只有在你點擊了頁碼列表中非第１頁時，Current_Page才不會是1，那么就執(zhí)行：Sql = "Select Top "&PageCount&" * From page_table where id<(Select Min(id) From (Select Top "&((Current_Page-1)*PageCount)&" id From page_table order by id desc)) order by id desc"，這條sql語句是分頁的核心．他的大致意思是說：在表中讀取PageCount條數(shù)據(jù)．這些數(shù)據(jù)的id必須小于已經顯示出來的數(shù)據(jù)中id最小的那條數(shù)據(jù)．比如你點擊的是第3頁，每頁顯示的條數(shù)為5條．那么這第三頁中要顯示的數(shù)據(jù)的id，必須要小于第二頁id最小的那條數(shù)據(jù)，因為是倒序讀?。忝靼琢藛幔咳绻愀緹o法理解該Sql的意思．請惡補Sql的相關知識
關于“Ajax如何讀取數(shù)據(jù)并分頁顯示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
