Heim > Web-Frontend > js-Tutorial > Verwenden Sie das Laden von Bildern, um das Problem vorübergehend leerer Seiten beim Laden von Ajax-Daten zu lösen

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

亚连
Freigeben: 2018-05-23 10:33:40
Original
2162 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage