web-entwicklung-programm-codeKürzlich hatte ich das Problem, dass ich clientseitig per JavaScript in einer Anwendung mehrere Variablen an eine serverseitige PHP-Funktion übergeben musste, welche mir dann eine entsprechende Datenbankabfrage generiert und den Status sowie Antwort-Variablen zurückliefert in JavaScript.

 

Ajax hieß das Zauberwort. Das Testscript auf den Entwicklungsservern will ich in diesem Beitrag kurz beschreiben. Beachtet dass ich lediglich das grundlegende Thema behandle, ohne näher auf Sicherheitsfakten einzugehen.

In jeden Fall sollten selbstverständlich sämtliche Input-Werte stets auf dem Server validiert werden!

 

 

Erste Anlaufstelle ist eine index.php mit folgenden Inhalt, welchen ich anschließend näher erkläre:

1  <!DOCTYPE html>
2  <html>
3      <head>
4          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5          <title>AJAX Test</title>
6          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
7          <script type="text/javascript">
8          // javascript for both JS to PHP to JS
9          function clickJStoPHPFunctoJS(event){
10             $.ajax({
11                 url: "php/bothInfo.php",
12                 data: {newname: "meinneuername"},
13                 datatype: "json",
14                 type: "POST",
15                 success: function(data) { clickJStoPHPFunctoJSResponse(data); }
16             });
17         }
18
19         function clickJStoPHPFunctoJSResponse(data) {
20             // Antwort des Server ggf. verarbeiten
21             var response = $.parseJSON(data);
22             var newname = response.newname;
23             alert("Mein neuer Name: " + newname);
24         }
25         </script>
26     </head>
27     <body>
28         <button type="button" id="myClickBtn" onclick="clickJStoPHPFunctoJS(event)">JStoPHPFunctoJS</button>
29         variable is send into a function and then returned back in alert
30     </body>
31 </html>

Zeile 6: Hier binde ich über die Google APIs jQuery ein, welches mir einiges an Schreibarbeit erspart.

Zeile 9 - 17: Dies ist die erste Funktion, welche den Click auf meinen Button erkennt und mit dem jQuery AJAX "$.ajax()" in diesem Fall an die "php/bothInfo.php" als POST und JSON codierten String übergibt.

Zeile 19 - 24: Diese Funktion ist lediglich die Rückantwort vom PHP-Script und wird in der vorherigen Funktion in Zeile 15 bei Erfolg aufgerufen. Sie liest lediglich den übergebenen JSON-String, und gibt die Variable über einen ALERT aus.

Zeile 28: Hier habe ich nur noch den Button, welche die Funktion per ONCLICK aufruft.

 

1  <?php

2
3  // warning security risk! validate input fields
4  $newname= $_POST["newname"];
5
6  if ($newname != "") {
7      newname($newname);
8  }
9
10 function newname($newname) {
11
12     $response = array (
13         "newname" => $newname
14     );
15
16     // here can be another code as database queries for example
17
18     // encode data
19     print_r(json_encode($response));
20 }

Zeile 4: Hier lese ich die per POST übergebenen Variablen (OHNE SIE ZU VALIDIEREN!!!)

Zeile 6 - 8: In dieser Abfrage sehe ich lediglich nach, ob die Variable auch einen Inhalt hat. Wenn nicht passiert gar nichts. Ansonsten wird die Funktion newname() mit der Variable als Parameter aufgerufen.

Zeile 10 - 20: Hier ist dann die newname() Funktion, welche in diesem Fall nur noch die übergebene Variable in ein Array schreibt, dieses JSON-codiert und dem JavaScript zurückliefert.

 

Das wars dann auch schon.

Auch AJAX ist also auch keine Hexerei...

 

Kommentare  
0 #1 Anonym 2017-04-11 11:45
Vielen Dank, hat mir sehr geholfen. Werde deine Seite weiterempfehlen . :lol:
Zitieren
Kommentar schreiben
Ich habe den Datenschutz gelesen. Ich stimme zu, dass meine Angaben und Daten zur elektronisch erhoben und gespeichert werden. Alternativ kann ich als Namen auch ein Pseudonym eintragen. Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an widerrufen.

JooWI Online

JooWI Online Warenwirtschaft

JooWI ist eine auf Joomla basierende Warenwirtschafts Anwendung.
Weitere Infos auf der Projekthomepage.

Bestellen Sie noch heute die 30 Tage GRATIS Ultimate Version!

Follow Me

Web: medialekt.de

Mail: