Ajax-Aufruf mit jQuery

Beispiel:

<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>

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 );

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.

Beispiel für Datei-Download über jQuery-AJAX