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