Benutzer-Werkzeuge
jquery:ajax
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
| Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
jquery:ajax [2016/03/24 18:15] webproducer angelegt |
jquery:ajax [2024/02/02 12:24] (aktuell) webproducer Download von Dateien per AJAX |
||
|---|---|---|---|
| Zeile 3: | Zeile 3: | ||
| ===== Beispiel: ===== | ===== Beispiel: ===== | ||
| - | <code html index.php> | + | <code html index.html> |
| <html> | <html> | ||
| <head> | <head> | ||
| Zeile 20: | Zeile 20: | ||
| Status: <div id="status">warte auf Eingaben</div> | Status: <div id="status">warte auf Eingaben</div> | ||
| <script type="text/javascript"> | <script type="text/javascript"> | ||
| - | <!-- | ||
| $('#add').click( function() { | $('#add').click( function() { | ||
| Zeile 40: | Zeile 39: | ||
| }); | }); | ||
| } ); | } ); | ||
| - | //--> | ||
| </script> | </script> | ||
| </body> | </body> | ||
| Zeile 64: | Zeile 62: | ||
| 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. | 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:** | ||
| + | |||
| + | <code javascript> | ||
| + | var ergebnis; | ||
| + | |||
| + | $.ajax( { | ||
| + | url: 'ajax.php', | ||
| + | type: 'post', | ||
| + | async: false, | ||
| + | data: $('#Formulareingaben').serialize(), | ||
| + | success: function( response ) { | ||
| + | ergebnis = response; | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | $('#Ergebnisfeld').html( ergebnis ); | ||
| + | </code> | ||
| + | |||
| + | 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]] | ||
| + | |||
jquery/ajax.1458839758.txt.gz · Zuletzt geändert: 2016/03/24 00:00 (Externe Bearbeitung)
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
