Formular ohne Framework verarbeiten

2 | 12081 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Formular ohne Framework verarbeiten" mit Ihrem Wissen!

Anzeige Hier werben

Warum sollte man ohne Framwork arbeiten?

Das ist sicherlich die Frage, die sich jeder als erstes stellt. Die Antwort ist erstaunlich simpel: Frameworks sind in der Regel sehr umfangreich und deshalb reichlich ungeeignet, um die Technik dahinter zu verstehen.

Wenn man also nicht einfach blind ein Framework nutzen möchte, sondern auch den technischen Aspekt abdecken möchte, bietet es sich durchaus an, probeweise ohne Framework zu arbeiten.

Die in diesem Artikel vorgestellte Funktion xhr (Abkürzung für XMLHttpRequest) überprüft lediglich die Browserkompabilität für das XHR-Objekt und erstellt ein solches. Dieser Vorgang wird dabei in eine schlanke Funktion zusammengefasst.

Die xhr-Funktion

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*@cc_on @if (@_win32 && @_jscript_version >= 5) if (!window.XMLHttpRequest)
window.XMLHttpRequest = function() { return new ActiveXObject('Microsoft.XMLHTTP') }
@end @*/

function xhr(method, url, data, cb, apply_para) {
  method = method.toLowerCase();
  var req;
  req = new XMLHttpRequest();
  req.open(method, url + (data && method == 'get' ? '?' + data : ''), true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  if (method == 'post') {
      req.setRequestHeader("Method", "POST " + url + " HTTP/1.1");
      req.setRequestHeader("Content-Length", data.length);
  }
  req.onreadystatechange = function() {
      if (req.readyState == 4 && req.status == 200) {
              if (cb) {
              cb.apply(null, [req].concat(apply_para));
          }
      }
  }
  req.send(data);
}

Die xhr-Funktion wird mit den Parametern method (get oder post), url (aufzurufende Datei), data (zu übergebende Daten), cb (auszuführende JS-Callbackfunktion) aufgerufen. Hier zu ein Beispiel:

An die Datei request.php sollen die Daten foo=bar und bar=foo per get übergeben werden, bei einem erfolgreichen Request, soll die Javascriptfunktion shout() das Requestobjekt erhalten.

xhr('get','request.php','foo=bar&bar=foo',shout);

In unserem Beispiel lagern wir die XHR-Funktion in die Datei xhr.js aus, um das Ganze übersichtlicher zu gestalten.

Das HTML-Formular

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  <form id="daten" onsubmit="return false;" name="daten" action="#">
   <fieldset>
    <legend>Formular</legend>
    <label for="vorname">Vorname</label>
    <input type="text" id="vorname" name="vorname" />
    <label for="nachname">Nachname</label>
    <input type="text" id="nachname" name="nachname" />
    <input type="submit" name="submit" id="submit" value="Senden" onclick="xhr('get','request.php','daten='+JSON(),shout);" />
   </fieldset>
  </form>

Das HTML-Formular daten umfasst in diesem Beispiel nur 2 Felder (vorname,nachname) und einen Submitbutton, das onsubmit-Event stoppt den Absendeprogress des Formulars, da die Seite nicht neu geladen werden, sondern die Daten per Ajax übergeben werden sollen. Das Event onclick wird ausgeführt, wenn der Submitbutton geklickt wird, demnach die Daten übertragen werden sollen. Hierbei wird die Funktion xhr ausgeführt. Die Funktion JSON wird anschließend erklärt.

Die JSON-Funktion

 
JavaScript
1
2
3
4
5
6
7
8
    function JSON() {
      var formValues = '{';
      for (var i=0; i<document.getElementsByTagName('input').length; i++) with (document.getElementsByTagName('input')[i])
      {
        formValues = formValues + '\"' + name + '\":\"' + value + '\",';
      }
      return formValues = formValues.substr(0,formValues.length-1) + '}';
    }

Die Javascriptfunktion JSON() erstellt ein JSON aus allen Formulardaten in die Variable formValues und gibt diese zurück.

Die PHP-Datei

 
PHP
1
2
3
4
<?php
$daten_arr = json_decode(stripcslashes($_GET['daten']),true);
var_dump($daten_arr);
?>

Die PHP-Funktion json_decode erstellt ein Array aus dem JSON, dass in der Variable daten übergeben wurde. Anschließend wird das Array ausgegeben. Für spezifischere Zwecke kann man das Array hier verarbeiten und dann eine entsprechende Ausgabe erzeugen.

Die gesamte HTML-Datei

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <script type="text/javascript" src="xhr.js"></script>
  <script type="text/javascript" >
    function JSON() {
      var formValues = '{';
      for (var i=0; i<document.getElementsByTagName('input').length; i++) with (document.getElementsByTagName('input')[i])
      {
        formValues = formValues + '\"' + name + '\":\"' + value + '\",';
      }
      return formValues = formValues.substr(0,formValues.length-1) + '}';
    }
    function shout(req) { alert(req.responseText); }
  </script>
 </head>

 <body>
  <form id="daten" onsubmit="return false;" name="daten" action="#">
   <fieldset>
    <legend>Formular</legend>
     <label for="vorname">Vorname</label>
      <input type="text" id="vorname" name="vorname" />
    <label for="nachname">Nachname</label>
     <input type="text" id="nachname" name="nachname" />
    <input type="submit" name="submit" id="submit" value="Senden" onclick="xhr('get','request.php','daten='+JSON(),shout);" />
   </fieldset>
  </form>
 </body>
</html>

Die Callbackfunktion shout() gibt eine MessageBox mit dem Inhalt des responseTexts aus.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Formular ohne Framework verarbeiten" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Formular ohne Framework verarbeiten" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Thomas Schaaf ist Programmierer und Supportleiter der Komola UG. Die Projekte von Komola werden mit PHP 5, MySQL 5, xHTML, CSS sowie AJAX umgesetzt. Des weiteren vertreibt er die deutsche Version der beliebten PHP IDE VS.Php.
  • Kinderturnen - Sport Spiele für Kinder
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.