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 Kommentare zu “jQuery: PHP-Scripts mit JavaScript aufrufen”

  1. jquery serverzugriff - php.deam 2. Juni 2012 um 18:30 Uhr

    […] https://www.virtual-maxim.de/jquery-p…ript-aufrufen/ Steht doch alles gut erklĂ€rt in den von dir angesprochenen Tutorials: Code: […]

  2. abatueram 31. Juli 2012 um 17:43 Uhr

    die erklĂ€rung ist fĂŒr leute die sich nicht auskennen etwas schwirig zu verstehen und fĂŒr anfĂ€nger erst recht

  3. Maximam 31. Juli 2012 um 19:34 Uhr

    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.

  4. Arminusam 11. August 2012 um 19:20 Uhr

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

  5. Janam 19. November 2012 um 23:32 Uhr

    Schließe mich Maxim und Arminus an: Gutes Tutorial, auch fĂŒr einen AnfĂ€nger gut verstĂ€ndlich. Danke!

  6. Michiam 23. Februar 2013 um 13:23 Uhr

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

  7. rambodieschenam 20. November 2015 um 13:19 Uhr

    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.

Trackback URI | Kommentare als RSS

Einen Kommentar schreiben

XHTML: Du kannst folgende Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <sub> <sup>

Hinweis: Ich behalte mir das Recht vor solche Kommentare, die Beleidigungen oder rechtswidrige Inhalte beinhalten erst nach einer Editierung freizugeben oder kommentarlos zu löschen. Ähnliches gilt auch für Kommentare die offensichtlich nur der Suchmaschinenoptimierung dienen.