AJAX implémente la pagination des données sans actualisation-js tutoriel-php.cn

AJAX implémente la pagination des données sans actualisation

php中世界最好的语言

Libérer： 2018-04-04 16:05:44

original

1841 Les gens l'ont consulté

Cette fois, je vais vous présenter AJAX pour implémenter la pagination des données sans actualisation. Quelles sont les précautions pour qu'AJAX implémente la pagination des données sans actualisation. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai déjà utilisé le contrôle GridView lors de l'utilisation d'Asp.Net. Ce contrôle a sa propre fonction de pagination. Bien qu'il soit moche, il est toujours très puissant. Ici, je vais vous montrer un moyen plus puissant : utiliser AJAX pour obtenir la pagination des données directement à partir du serveur sans actualiser.

1. Processus de mise en œuvre

Remarque : Le contenu suivant est utilisé au sein du serveur.

Tout d'abord, créez plusieurs fichiers dans le chemin du serveur, par exemple page1.txt, page2.txt, page3.txt.

Mettez un tableau dans chaque fichier, comme suit :

[{user:'blue',pass:'123'},{user:'aaa',pass:'dsfaa'},{user:'Ares',pass:'12346'}]

Copier après la connexion

Figure 1 Contenu de la première page

HTML frontal 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>

Copier après la connexion

AJAX encapsulé, code JavaScript :

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

Copier après la connexion

Effet final :

Figure 2 Effet d'affichage

2. Résumé

AJAX nécessite encore plus de tentatives et plus de pratique. La pagination est une bonne idée, elle peut améliorer la vitesse d’accès, c’est une bonne méthode et elle apportera de meilleurs avantages à tout le monde à l’avenir.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment éviter d'être intercepté par le navigateur lorsque le rappel ajax ouvre un nouveau formulaire

Discussion sur Ajax et recherche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!