====== Ajax-Aufruf mit jQuery ====== ===== Beispiel: ===== Ajax mit jQuery-Demo

Zahlen addieren:

+
=


Status:
warte auf Eingaben
$_POST['number_1'] + $_POST['number_2'], 'status' => "fertig" ]; header( 'Content-type: application/json' ); echo json_encode( $response ); // array in JSON konvertieren } else throw new Exception( 'no numbers given', 500 ); ===== Erläuterungen: ===== Durch das Click-Ereignis der Schaltfläche mit der id "add" wird durch JavaScript die ajax-Funktion aufgerufen. Hier werden als Parameter die values der beiden Elemente "number_1" und "number_2" als POST-Variablen an die PHP-Datei "ajax.php" übergeben. Hier werden die Variablen verarbeitet und als Ergebnis eine JSON-Datei zurückgegeben. Im success-Fall (HTTP-Statuscode 200) werden die empfangenden Variablen "result" und "status" ausgelesen und zur weiteren Verarbeitung verwendet, wobei der Wert von "result" als value in ein Input-Field eingetragen und der Text der Variable "status" als HTML-Text in ein div eingefügt wird. ---- ===== Synchron/Asynchrone Ausführung===== Im Standard-Verhalten wird der Ajax-Aufruf als Asynchron durchgeführt. Das heißt, dass während der Ausführung des Ajax-Aufrufes das JavaScript weiter ausgeführt wird. Das kann unter bestimmten Umständen ein nicht gewolltes Verhalten sein, z. B. wenn das Ergebnis aus dem Ajax-Aufruf für die weitere Ausführung des JavaScripts notwendig ist. Für diese Fälle kann der zusätzliche Parameter "async" auf false gesetzt werden. **Beispiel:** var ergebnis; $.ajax( { url: 'ajax.php', type: 'post', async: false, data: $('#Formulareingaben').serialize(), success: function( response ) { ergebnis = response; } }); $('#Ergebnisfeld').html( ergebnis ); In diesem Beispiel wartet das JavaScript auf die Antwort des Ajax-Calls, um mit dem Ergebnis weiterarbeiten zu können. ---- ===== Download von Dateien per AJAX ===== Es besteht auch die Möglichkeit Dateien/Dokumente per Download über einen AJAX-Aufruf zur Verfügung zu stellen. [[jquery:ajax:download|Beispiel für Datei-Download über jQuery-AJAX]]