Lade gif Bild, während jQuery ajax läuft

Question

Ich versuche, ein Ladebild zu zeigen, während mein Ajax-Anruf läuft, aber mit dem beforeSend Attribut ändert sich nicht mein Ergebnisbereich.

$.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    beforeSend: function() { 
    $('#response').text('Loading...'); 
    }, 
    success: function(html) { 
    $('#response').html(html); 
    } 
} 

Vielen Dank im Voraus.

Answer 1

ich eine Lösung haben, ist es vielleicht nicht die beste Art und Weise, es zu tun, aber es hat arbeitete in diesem Fall.

$('input').keyup(function() { 

    $('#response').text('loading...'); 

    $.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    success: function(html) { 
     $('#response').html(html); 
    } 
    }); 
}); 

Durch Einstellen des resonce Inhalts vor der Ajax-Aufruf der Funktion bleibt die Lade Text zeigt, bis der Ajax-Aufruf mit dem gleichen Inhalt aktualisiert.

Vielen Dank an alle, die sich die Zeit genommen haben zu antworten.

Alan

Answer 2

Sie sind fehlten ein Komma nach cache: false

Answer 3

können Sie auch die folgenden Befehle verwenden:

$('#tblLoading').ajaxStart(function() { $(this).show(); }); 
$('#tblLoading').ajaxComplete(function() { $(this).hide(); }); 

Answer 4

Ich hatte ein ähnliches Problem. Um mein Problem zu lösen, ersetzte ich den .text im Abschnitt vor dem Senden durch .html und erstellte ein HTML-Tag, das in das Element eingefügt wurde, das meinen Status enthält. Die Funktion success hat den von der Funktion .text() erstellten Inhalt nicht ersetzt, aber den durch die Funktion .html() erstellten Inhalt ersetzt.

$.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    beforeSend: function() { 
    $('#response').html("<img src='/images/loading.gif' />"); 
    }, 
    success: function(html) { 
    $('#response').html(html); 
    } 
}