wake-up-neo.com

So zeigen Sie den Fortschrittsbalken beim Laden mit Ajax an

Ich habe eine Dropdown-Box. Wenn der Benutzer einen Wert aus der Dropdown-Liste auswählt, führt er eine Abfrage aus, um die Daten aus der Datenbank abzurufen, und zeigt die Ergebnisse im Frontend mit ajax an. Es dauert etwas Zeit, daher möchte ich in dieser Zeit einen Fortschrittsbalken anzeigen. Ich habe gesucht und habe zahlreiche Tutorials zum Erstellen von Fortschrittsbalken für Uploads gefunden, aber ich habe keine gemocht. Kann mir jemand eine hilfreiche Anleitung geben?

Mein Ajax-Code:

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

        $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
            data:"title="+clientid,
            success:function(data){
             $("#result").html(data);
            }
        });

    });
});
</script>
javascriptphpjqueryajax
48
Xavi

Dieses link beschreibt, wie Sie einen Fortschrittsereignis-Listener zur xhr-Objekt-Jquery hinzufügen.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
                console.log(percentComplete);
            }
       }, false);

       // Download progress
       xhr.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               // Do something with download progress
               console.log(percentComplete);
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});
64
Prateek
<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
     //show the loading div here
    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $("#result").html(data);
          //hide the loading div here
        }
    }); 
    });
});
</script>

Oder Sie können das auch tun:

$(document).ajaxStart(function() {
        // show loader on start
        $("#loader").css("display","block");
    }).ajaxSuccess(function() {
        // hide loader on success
        $("#loader").css("display","none");
    });
20
Suvash sarker

Grundsätzlich müssen Sie ein Ladebild haben. Laden Sie hier ein kostenloses Bild herunter http://www.ajaxload.info/

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
      $('#loadingmessage').show();

    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $('#loadingmessage').hide();
             $("#result").html(data);
        }
    }); 
    });
});

Auf HTML-Körper 

<div id='loadingmessage' style='display:none'>
       <img src='img/ajax-loader.gif'/>
</div>

Wahrscheinlich könnte dir das helfen

11
Anish

Hier ist ein Beispiel, das für mich mit MVC und Javascript im Razor arbeitet. Die erste Funktion ruft eine Aktion über ajax auf meinem Controller auf und übergibt zwei Parameter.

        function redirectToAction(var1, var2)
        {
            try{

                var url = '../actionnameinsamecontroller/' + routeId;

                $.ajax({
                    type: "GET",
                    url: url,
                    data: { param1: var1, param2: var2 },
                    dataType: 'html',
                    success: function(){
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(error);
                    }
                });

            }
            catch(err)
            {
                alert(err.message);
            }
        }

Verwenden Sie ajaxStart, um Ihren Fortschrittsbarcode zu starten.

           $(document).ajaxStart(function(){
            try
            {
                // showing a modal
                $("#progressDialog").modal();

                var i = 0;
                var timeout = 750;

                (function progressbar()
                {
                    i++;
                    if(i < 1000)
                    {
                        // some code to make the progress bar move in a loop with a timeout to 
                        // control the speed of the bar
                        iterateProgressBar();
                        setTimeout(progressbar, timeout);
                    }
                }
                )();
            }
            catch(err)
            {
                alert(err.message);
            }
        });

Wenn der Vorgang abgeschlossen ist, schließen Sie die Fortschrittsleiste

        $(document).ajaxStop(function(){
            // hide the progress bar
            $("#progressDialog").modal('hide');
        });
6
chuck

$(document).ready(function () { 
 $(document).ajaxStart(function () {
        $('#wait').show();
    });
    $(document).ajaxStop(function () {
        $('#wait').hide();
    });
    $(document).ajaxError(function () {
        $('#wait').hide();
    });   
});
<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
            <img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>

4
Rohit Dodiya

Nach langem Suchen nach einer Möglichkeit, einen Fortschrittsbalken anzuzeigen, nur um das eleganteste Aufladen zu ermöglichen, konnte kein Weg gefunden werden, der meinem Zweck dient. Überprüfen Sie, ob der aktuelle Status der Anforderung demaziado komplex und manchmal nicht wirklich funktionierte Schnipsel auf eine sehr einfache Weise erstellt wurde, aber es gibt mir die Erfahrung (oder fast), nach dem Code zu suchen:

$.ajax({
    type : 'GET',
    url : url,
    dataType: 'html',
    timeout: 10000,
    beforeSend: function(){
        $('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
        $('.progress-bar').animate({width: "30%"}, 100);
    },
    success: function(data){  
        if(data == 'Unauthorized.'){
            location.href = 'logout';
        }else{
            $('.progress-bar').animate({width: "100%"}, 100);
            setTimeout(function(){
                $('.progress-bar').css({width: "100%"});
                setTimeout(function(){
                    $('.my-box').html(data);
                }, 100);
            }, 500);
        }
    },
    error: function(request, status, err) {
        alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
    }
});
4
Gabriel Glauber

Ich habe es so gemacht

CSS

html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    /* For the loading indicator to be vertically centered ensure */
    /* the html and body elements take up the full viewport */
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #333 url('/Images/loading.gif') no-repeat 50% 50%;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}

JS

$(document).ready(function () {
   $(document).ajaxStart(function () {     
       $("html").addClass("loading");
    });
    $(document).ajaxStop(function () {        
        $("html").removeClass("loading");
    });
    $(document).ajaxError(function () {       
        $("html").removeClass("loading");
    }); 
});
1
Academy of Programmer

Ich weiß, dass bereits viele Antworten für diese Lösung geschrieben wurden. Ich möchte jedoch eine andere Javascript-Methode (abhängig von JQuery) zeigen, in der Sie NUR eine einzige JS-Datei ohne Abhängigkeit von CSS oder Gif-Images einfügen müssen Code und dies kümmert sich um alle Animationen der Fortschrittsleiste, die während der Ajax-Anforderung auftreten. Sie müssen die Javascript-Funktion einfach so übergeben

var objGlobalEvent = new RegisterGlobalEvents(true, "");

 Preview of Fiddle Loader Type

Hier ist die Arbeitsgeige für den Code. https://jsfiddle.net/vibs2006/c7wukc41/3/

1
vibs2006

versuchen Sie dies, es kann Ihnen helfen

 $.ajax({
  type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
  beforeSend: function(  ) {
    // load your loading fiel here
  }
})
  .done(function( data ) {
    //hide your loading file here
  });
0
Ali