Die Seite erscheint kurzzeitig leer, wenn Ajax Daten lädt

Dieses Mal werde ich Ihnen die kurze leere Seite beim Laden von Daten durch Ajax vorstellen. Was sind die Vorsichtsmaßnahmen, um das Problem der kurzen leeren Seite beim Laden von Daten durch Ajax zu lösen? Schauen Sie mal rein.

Nach der Verwendung von Ajax zum asynchronen Abrufen von Daten im Projekt wird die Seite aufgrund von Datenproblemen oder Netzwerkproblemen manchmal immer leer angezeigt. Verwenden Sie nun das Laden von Bildern, um diesen Status zu ändern:

<script>
  $(function(){
    $.ajax({
      url:'',//提供接口的文件地址链接
      dataType:'json',
      type:'POST',  
      beforeSend: function(){
        $('#loading').html("<img src=\"images/loading.gif\" width=\"15%\" style=\"text-align:center;margin:0 auto;\"><p style=\"color:#999;font-size:14px\">加载中，请稍后……</p>") //数据发送过程中先加载图片 
      },
      error: function(msg){ //数据读取失败显示
        zNodes=data.responseJson;
        alert("对不起，数据获取失败，请联系管理员");
      },
      success:function(msg){ //数据读取成功并显示数据列表
        $('#loading').fadeOut(1000);  //图片显示时间；
        var ul = "";
        for(var i= 0;i<msg.legth;i++){ //数据列表行数
          ul += "<li class=&#39;list&#39;><a href=&#39;php/phpArticle.php?art="+msg[i][&#39;id&#39;]+" &#39;class=&#39;widget-list-link&#39;>" + msg[i]['title']+"<i class=&#39;more-mark&#39;>"+">>"+"</i></a></li>";
        } 
          $("#list").html(ul);
      },
      error:function(){ //失败时显示
        console.log("链接错误") ;
      }
    });
  });
</script>

Die Daten sind in Der Ladestatus wird angezeigt

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 die chinesische PHP-Website!

Empfohlene Lektüre:

Wie man mit dem domänenübergreifenden Ajax-Zugriffsfehler 501 umgeht

Wie man eine intelligente Stichwortsuche durchführt mit Ajax

Das obige ist der detaillierte Inhalt vonDie Seite erscheint kurzzeitig leer, wenn Ajax Daten lädt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!