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.