Heim > Artikel > Web-Frontend > AJAX implementiert Daten-Paging ohne Aktualisierung
AJAX implementiert Daten-Paging ohne Aktualisierung
- php中世界最好的语言Original
- 2018-04-04 16:05:441749Durchsuche
Dieses Mal werde ich Ihnen AJAX zur Implementierung von Daten-Paging ohne Aktualisierung vorstellen. Was sind die Vorsichtsmaßnahmen für AJAX zur Implementierung von Daten-Paging ohne Aktualisierung?
Ich habe das GridView-Steuerelement bereits bei der Verwendung von Asp.Net verwendet. Dieses Steuerelement verfügt über eine eigene Paging-Funktion. Obwohl es hässlich ist, ist es immer noch sehr leistungsfähig. Hier zeige ich Ihnen eine leistungsfähigere Möglichkeit – die Verwendung von AJAX, um die Datenpaginierung ohne Aktualisierung direkt vom Server zu erhalten.1. Implementierungsprozess
Hinweis: Der folgende Inhalt wird innerhalb des Servers verwendet. Erstellen Sie zunächst mehrere Dateien im Serverpfad, zum Beispiel page1.txt, page2.txt, page3.txt. Fügen Sie in jede Datei ein Array ein, wie folgt:[{user:'blue',pass:'123'},{user:'aaa',pass:'dsfaa'},{user:'Ares',pass:'12346'}]
<!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实现分页、</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++)
{
//给每一个按钮附一个初值索引
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
//调用AJAX函数
ajax('page'+(this.index+1)+'.txt', function (str){
//获得其中的数据
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>Encapsulated AJAX, JavaScript-Code:
/*
AJAX封装函数
url：系统要读取文件的地址
fnSucc：一个函数，文件取过来，加载完会调用
*/
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
var oAjax=null;
if(window.XMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
oAjax.open('GET', url, true);
//3.发送请求
oAjax.send();
//4.接收服务器的返回
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4) //完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
fnFaild(oAjax.status);
}
}
};
}Endeffekt:
Abbildung 2 Anzeigeeffekt
2. Zusammenfassung
AJAX erfordert noch mehr Versuche und mehr Übung. Paginierung ist eine gute Idee, sie kann die Zugriffsgeschwindigkeit verbessern, ist eine gute Methode und wird in Zukunft allen größeren Nutzen bringen. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:Wie man vermeidet, vom Browser abgefangen zu werden, wenn ein Ajax-Callback ein neues Formular öffnet
Diskussion am Ajax und Forschung
Das obige ist der detaillierte Inhalt vonAJAX implementiert Daten-Paging ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So lesen Sie Json-Daten mit AjaxNächster Artikel：So lesen Sie Json-Daten mit Ajax