Verwenden Sie das Laden von Bildern, um das Problem vorübergehend leerer Seiten beim Laden von Ajax-Daten zu lösen

Nachdem Sie Ajax zum asynchronen Abrufen von Daten im Projekt verwendet haben, wird die Seite aufgrund von Daten- oder Netzwerkproblemen immer leer angezeigt. Lassen Sie uns nun den spezifischen Beispielcode durch diesen Artikel lernen 🎜> 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:&#39;&#39;,//提供接口的文件地址链接
      dataType:&#39;json&#39;,
      type:&#39;POST&#39;,  
      beforeSend: function(){
        $(&#39;#loading&#39;).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){ //数据读取成功并显示数据列表
        $(&#39;#loading&#39;).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][&#39;title&#39;]+"<i class=&#39;more-mark&#39;>"+">>"+"</i></a></li>";
        } 
          $("#list").html(ul);
      },
      error:function(){ //失败时显示
        console.log("链接错误") ;
      }
    });
  });
</script>

Die Daten werden im Ladestatus angezeigt

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Schnelle Lösung für das Problem, dass die Seite des Ajax-Übermittlungsformulars immer noch aktualisiert wird

AJAX-Anzeige wird geladen Und das Es wird ein Implementierungsbeispiel für die Seite „Ebenenverdeckung“ angezeigt

Die Methode zur Verwendung von Ajax zum Senden eines Formulars im Lavarel-Framework_AJAX verwandt

Das obige ist der detaillierte Inhalt vonVerwenden Sie das Laden von Bildern, um das Problem vorübergehend leerer Seiten beim Laden von Ajax-Daten zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!