jQuery: PHP-Scripts mit JavaScript aufrufen

Beim Entwickeln einer Web 2.0-Website kommt man schnell an den Punkt, an dem PHP-Scripts im Hintergrund ausgeführt werden müssen ohne dass der Besucher viel davon merkt bzw. auf die Verarbeitung warten muss. Dies lässt sich leicht mit jQuery realisieren.

jQuery ist ein freies JavaScript-Framework, welches einem Programmierer viel Arbeit im Bezug auf Ajax abnimmt. jQuery besteht aus einer Datei, die wahlweise auch in komprimierter Form runtergeladen werden kann. Nach dem Einbinden der Bibliothek kann man sofort loslegen.

Die Funktionsweise des PHP-Funktionsausrufs wird an diesem einfachen Formular erklärt.

<h2>jQuery Beispiel</h2>

<form action="">
    <input type="text" size="40" id="iofield" name="iofield" /> 
    <input type="button" value="PHP Funktion aufrufen" onclick="callPHPScript()" />
</form>

<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>

<script type="text/javascript" src="jquery_sample.js">
</script>

Die Funktion doAnything soll per Javascript aufgerufen werden.

<?php

// eine beliebige PHP-Funktion 
function doAnything($arg1)
{
    echo "PHP Funktionsaufruf. Argument:'" . $arg1 . "'";
}

// per Argument in 'a' entscheiden welche Funktion aufgerufen werden soll
switch ($_POST['a'])
{
    case 'callDoAnything':
        doAnything($_POST['b']);
        break;

    default:
        break;
}
?>

Zum Aufruf der PHP-Funktion bietet sich jQuery Funktion post an.
Der Aufruf erklärt sich am Beispiel fast von selbst. Man ruft eine PHP-Datei über POST auf und übergibt die Parameter in Form einer Map.
In der PHP-Datei wird auf die übergebenen Werte über POST-Array zugegriffen.
Nach dem die Aufgaben erledigt sind, wird die interne Funktion mit dem Parameter data aufgerufen. Dieser Parameter erhält den Text, der in der PHP-Datei ausgegeben wurde.

// JavaScript Funktion
function callPHPScript()
{
    // wert aus dem input feld mit dem namen "iofield" auslesen
    var iofield = $('input[name=iofield]').val();

    // phpscript.php aufrufen über POST aufrufen
    // entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
    $.post("phpscript.php",
    {
        a: 'callDoAnything',
        b: iofield
    },
    function (data) {

        // die textausgabe zurück ins feld schreiben
        $('#iofield').val(data);
    });
}

Man darf nicht vergessen, dass diese Funktion asynchron arbeitet. Im Klartext bedeutet es, dass die Funktion callPHPScript nicht wartet bis das PHP-Script ausgeführt wurde.
Somit funktioniert auch folgender Code nicht:

// ACHTUNG: NICHT FUNKTIONIERENDE METHODE 
function callPHPScript()
{
    // wert aus dem input feld mit dem namen "iofield" auslesen
    var iofield = $('input[name=iofield]').val();

    var result = "default";

    // phpscript.php aufrufen über POST aufrufen
    // entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
    $.post("phpscript.php",
    {
        a: 'callDoAnything',
        b: iofield
    },
    function (data) {
        result = data;
    });

    // das Ergebnis aus dem PHP-Aufruf verwenden funktioniert NICHT!
    alert(result);
}

Führt man das Beispiel aus, so bekommt man immer „default“-Meldung, da die alert-Funktion bereits ausgeführt, während im Hintergrund das PHP-Script noch abgearbeitet wird.

Unter Umständen benötigt man auch einen synchronen Funktionsaufruf, sprich Javascript wartet bis das PHP-Script ausgeführt wurde.
Dazu bietet jQuery auch eine Funktion an: ajax.

var result = "default";

// phpscript.php aufrufen über POST aufrufen
// entspricht: phpscript.php?a=callDoAnything&b=[Inhalt von iofield]
result = $.ajax({
    type: 'POST',
    async: false,   // WICHTIG! 
    url: 'phpscript.php',
    data: ({
        a: "callDoAnything",
        b: iofield
    })
}).responseText;

alert(result);

Bei dieser Variante erhält man stets die Textausgabe aus dem PHP-Script.

Wie man sieht ist es ziemlich einfach PHP-Dateien über Javascript aufzurufen. Wenn man zum Beispiel mit MySQL-Datenbanken arbeitet, dann lernt man diese Methode erst richtig zu schätzen. Einfach mal bestimmte Daten aus der Datenbank holen und dann diese in einem Bereich einer Seite aktualisieren ohne dass die ganze Page neu geladen werden muss, stellt damit überhaupt kein Problem dar.

7 Gedanken zu „jQuery: PHP-Scripts mit JavaScript aufrufen“

  1. die erklärung ist für leute die sich nicht auskennen etwas schwirig zu verstehen und für anfänger erst recht

  2. Das ist auch kein Thema für absolute Anfänger. Wer aber schon ein paar Zeilen in Javascript und PHP geschrieben hat, der sollte in der Lage sein das Beispiel auszuführen. Den Code den eigenen Wünschen anzupassen ist dann der nächste Schritt.

  3. Stimmt, auch als Anfänger, der ein paar Zeilen JavaScript geschrieben hat, ist das Beispiel hervorragend nachzuvollziehen. Danke!

  4. Ich kommentiere Tutorials nicht oft aber das hier ist einfach zu hilfreich für mein aktuelles Problem (Datanbank vs. Javascript). Vielen Dank für den Denkanstoß!

  5. Schliesse mich leidr ‚abatuer‘ an.
    Wie ist der Inhalt der PHP und HTML-Datei schlussendlich und wie heissen diese genau?
    Wäre eine super Idee diese als Download anzubieten um Anfängern die Möglichkeit zu geben auszuprobieren.

Schreibe einen Kommentar