page d'occlusion de la couche d'opération ajax

Cette fois, je vais vous apporter la page d'occlusion de la couche d'opération ajax. Quelles sont les précautions pour la page d'occlusion de la couche d'opération ajax. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

Je pense que chaque développeur doit comprendre que lorsqu'un utilisateur fait une requête AJAX, s'il est en phase de requête depuis longtemps le temps, le fait de ne pas fournir de réponse à l'utilisateur créera une illusion pour l'utilisateur, l'amenant à penser que notre système « ne répond pas ». D’une certaine manière, c’est hostile.

Parfois, même si les utilisateurs ne peuvent pas voir les résultats qu'ils souhaitent, ils continueront à faire des demandes, ce qui peut avoir des conséquences inattendues.

Ainsi, lors d'une requête AJAX, nous prenons certaines mesures pour garantir le bon fonctionnement du système et une bonne expérience utilisateur.

Ici, ce que j'utilise est : afficher l'image de chargement et faire apparaître un calque afin que l'utilisateur ne puisse pas faire une autre demande.

Méthode de mise en œuvre

Partie HTML :

<p id="loading" class="loadingp"> 
    <img src="images/data-loading.gif" alt="图片加载中···" /> 
</p>

La partie HTML n'a besoin que de placez un p, qui contient un img.

Style CSS :

/*图片加载中p图层，用于遮挡页面*/ 
.loadingp 
{ 
  position:absolute; 
  text-align:center; 
  left:0px; 
  top:0px; 
  z-index:70; 
  background-color:#000000; 
  opacity: 0.7;/*透明#CCCCCC*/ 
  display:none; 
  }   
/*加载中图片*/ 
.loadingp img 
{ 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:80; 
  }

Style p et img.

Code JS

//ajax请求过程中，显示加载中图片并显示图层，请求完成隐藏图片 
$(function () { 
  //注册ajax加载事件 
  $("#loading").ajaxStart(function () { 
    //一个p，用来遮挡页面，请求过程中，不可操作页面 
    var lockwin = $(this); 
    //p占满整个页面 
    lockwin.css("width", "100%"); 
    lockwin.css("display", "block"); 
    lockwin.css("height", $(window).height() + $(window).scrollTop()); 
    //设置图片居中 
    $("#loading img").css("display", "block"); 
    $("#loading img").css("left", ($(window).width() - 88) / 2); 
    $("#loading img").css("top", ($(window).height() + $(window).scrollTop()) / 2); 
  }); 
 
  $("#loading").ajaxStop(function () { 
    //隐藏p 
    var lockwin = $(this); 
    lockwin.css("width", "0"); 
    lockwin.css("display", "none"); 
    lockwin.css("height", "0"); 
    //设置图片隐藏 
    $("#loading img").css("display", "none"); 
  }); 
});

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

Lecture recommandée :

Comment utiliser Ajax pour publier une demande de saut de page

Utiliser Ajax pour augmenter les données en fonction de Méthode de compte OA du système de ressources humaines

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!