AJAX implementiert Daten-Paging ohne Aktualisierung-js-Tutorial-php.cn

AJAX implementiert Daten-Paging ohne Aktualisierung

php中世界最好的语言

Freigeben： 2018-04-04 16:05:44

Original

1834 Leute haben es durchsucht

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'}]

Nach dem Login kopieren

Abbildung 1 Inhalt der ersten Seite

Front-End-HTML Code:

<!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(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;, function (str){
        //获得其中的数据
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length;i++)
        {
          var oLi=document.createElement(&#39;li&#39;);
          oLi.innerHTML=&#39;<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>

Nach dem Login kopieren

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);
      }
    }
  };
}

Nach dem Login kopieren

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!