Wissensarchiv für Entwickler

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Ajax-Aufruf mit jQuery ======

===== Beispiel: =====

<code html index.php>
<html>
<head>
    <title>Ajax mit jQuery-Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <form>
        <h1>Zahlen addieren:</h1>
        <label for ="number_1">1. Zahl: <input type="text" id="number_1" /> </label> + <br/>
        <label for ="number_2">2. Zahl: <input type="text" id="number_2" /> </label> = <br/>
        <hr/>
        <label for ="result">Ergebnis: <input type="text" id="result" /> </label><br/>
        <input type="button" id="add" value="addieren" />
    </form>
    Status: <div id="status">warte auf Eingaben</div>
    <script type="text/javascript">
        $('#add').click( function() {

            $.ajax( {
                url: 'ajax.php',
                type: 'post',
                data: { 'number_1': $('#number_1').val(), 'number_2': $('#number_2').val() },
                success: function( response ) {
                    $('#result').val( response.result );
                    var status = $('#status');
                    status.html( response.status );

                    if( response.status == "fertig") {

                        status.css("background-color", "green");
                        status.css("color", "white");
                    }
                }
            });
        } );
    </script>
</body>
</html>
</code>

<code php ajax.php>
<?PHP

if( isset( $_POST['number_1'] ) && isset( $_POST['number_2']) ) { // nur, wenn zwei Zahlen übergeben wurde

        $response = [   'result' => $_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 );
</code>

===== 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:**

<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.
Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
