Laden Indikator auf synchronem Ajax

Question

Ich benutze Ajax mit jQuery auf meiner Website und muss einen Fortschritt/Lade-Indikator zeigen.

Mein dilemna ist dies:

• Synchrone AJAX sperrt den Browser, so dass ich kann nichts tun (zB eine Ladeanzeige zeigen) bis der Inhalt zurückgegeben werden, in welcher Zeit es zu spät ist
• I JSON als Rückgabedatentyp verwenden und Asynchron-Einstellung = true gibt eine leere Antwortstring
• meinen ganzer Rahmen auf dem Rückgabetyp setzt

JSON-formatiert werden kann ich nicht scheinen, um JS zu finden, um dem Benutzer einen Hinweis zu geben, dass etwas in Bearbeitung ist, außer um eine Warnung() zu geben. (Aus irgendeinem Grund funktioniert eine Warnung).

Irgendwelche Vorschläge?

Mein Code:

JS

var jqXHR = $.ajax(
{ 
    type: "POST", 
    url: url, 
cache: false, 
    data: params, // array of parameters 
    async: false, // responseText is empty if set to true 
    dataType: 'json', 
    error: function() 
    { 
     alert("Ajax post request to the following script failed: " + url); 
    } 

}); 

var html = jqXHR.responseText; 

PHP

$return = array(); 
$return['status'] = 1; 
$return['message'] = "some html here ..."; 
echo json_encode($return); 

Answer 1

Sie benötigen eine Ladeanzeige zeigen, bevor Sie die Ajax-Request aufrufen und Sie können die Callback-Funktion und success verwenden eine Ladeanzeige ausblenden

//show here the loading display 
    $(".loading").show(); 
    setTimeout(function() { 
    var jqXHR = $.ajax({ 
     type: "POST", 
     url: url, 
     cache: false, 
     data: params, // array of parameters 
     async: false, // responseText is empty if set to true 
     dataType: 'json', 
     error: function(){ 
       alert("Ajax post request to the following script failed: " + url); 
     }, 
     success: function(){ 
       //hide loading display here 
       $(".loading").hide(); 
     } 
    }); 
    }, 0); 

Nun benötigen Sie eine Verzögerung mit setTimeout() vor dem Aufruf der Ajax-Funktion, da es sogar die Anzeige der Ladeanzeige anhalten kann, da während der $(".loading").show(); wird die Synchronisierungs-Ajax-Anforderung aufgerufen wird und sicher den Browser vor dem Laden sperren Anzeigeanimation wird abgeschlossen

Answer 2

Sie können die Jquery Global Ajax Event Handler verwenden. Dieser Link beschreibt sie im Detail:

http://api.jquery.com/category/ajax/global-ajax-event-handlers/

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}); 

$(document).ajaxComplete(function() { 
    $("#loading").hide(); 
}); 

Answer 3

Hallo irgendeine Sache wie das verwenden, um einen Beitrag in magento zu bekommen ....

Dies ist die HTML

<div class="popupNews"> 
    <div class="popClose">X</div> 
     <div id="loading"><img src="<?php echo $this->getSkinUrl('images/loader.gif'); ?>" border="0" /></div> 
     <div id="result"></div> 
    </div> 
</div> 

Und dies die Jquery

var url = 'http://blabla.com/ajax'; 

jQuery.ajaxSetup({ 
    beforeSend:function(){ 
     jQuery("#loading").show(); 
    }, 
    complete:function(){ 
     jQuery("#loading").hide(); 
    } 
}); 

jQuery.ajax({ 
    url: url, 
    type: 'POST', 
    data: {id: post}, 
    success: function(data) { 
     jQuery("#result").html(data); 
    } 
});