Formular ohne Framework verarbeiten

2 | 17 Kommentare | 5616 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

/*@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

  <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

    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

<?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

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

sten
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Thomas Schaaf
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.
Moritz Kern
graphic, motion & web design - kernreaktor - staportal - mukitu
Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.

Webdesign, Tutorials und mehr - Webmasterpro.de

Clientseitig

Serverseitig

Über Webmasterpro.de

Unsere Sponsoren