這篇文章將為大家詳細(xì)講解有關(guān)如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)榆樹,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
一、實(shí)現(xiàn)過程
注意:一下的內(nèi)容都是在服務(wù)器內(nèi)使用的。
首先要在服務(wù)器的路徑下建立幾個(gè)文件,比如,page1.txt,page2.txt,page3.txt。
每個(gè)文件中放入數(shù)組,如下:
復(fù)制代碼 代碼如下:
[{user:'blue',pass:'123'},{user:'aaa',pass:'dsfaa'},{user:'Ares',pass:'12346'}]
圖一 頁面一的內(nèi)容
前臺(tái)HTML代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AJAX實(shí)現(xiàn)分頁、</title> <script src="ajax.js"></script> <script> window.onload=function () { var oUl=document.getElementById('ul1'); var aBtn=document.getElementsByTagName('a'); var i=0; for(i=0;i<aBtn.length;i++) { //給每一個(gè)按鈕附一個(gè)初值索引 aBtn[i].index=i; aBtn[i].onclick=function () { //調(diào)用AJAX函數(shù) ajax('page'+(this.index+1)+'.txt', function (str){ //獲得其中的數(shù)據(jù) var aData=eval(str); oUl.innerHTML=''; for(i=0;i<aData.length;i++) { var oLi=document.createElement('li'); oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>'; oUl.appendChild(oLi); } }); }; } }; </script> </head> <body> <ul id="ul1"> </ul> <a href="javascript:;">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> </body> </html>
封裝的AJAX ,JavaScript代碼:
/* AJAX封裝函數(shù) url:系統(tǒng)要讀取文件的地址 fnSucc:一個(gè)函數(shù),文件取過來,加載完會(huì)調(diào)用 */ function ajax(url, fnSucc, fnFaild) { //1.創(chuàng)建Ajax對象 var oAjax=null; if(window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); } else { oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連接服務(wù)器 oAjax.open('GET', url, true); //3.發(fā)送請求 oAjax.send(); //4.接收服務(wù)器的返回 oAjax.onreadystatechange=function () { if(oAjax.readyState==4) //完成 { if(oAjax.status==200) //成功 { fnSucc(oAjax.responseText); } else { if(fnFaild) fnFaild(oAjax.status); } } }; }
最終實(shí)現(xiàn)效果:
圖二 展示效果
ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù),可以通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,使網(wǎng)頁實(shí)現(xiàn)異步更新。
關(guān)于“如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
當(dāng)前名稱:如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁
文章來源:http://bm7419.com/article6/gejeig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、網(wǎng)站建設(shè)、小程序開發(fā)、App開發(fā)、Google、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)