Formularversand mit Ajax

~~Inhalt~~Dieses Beispiel veranschaulicht die Möglichkeit Formulardaten mittels jQuery per Ajax versenden. Voraussetzung hierfür ist das Einbinden des jQuery-Frameworks und des speziellen Scriptes jquery.form.js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Beispieldokument</title>
 
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
  // warten bis die DOM-Struktur geladen ist 
  $(document).ready(function() {
    var options = { 
      target:        '#div_suchergebnisse'   // Element in das die Serverantwort geschrieben wird
      geladen…//beforeSubmit:  showRequest,  // optionale Funktion vor dem Absenden des Formulares 
      //success:       showResponse  // optionale Funktion nach dem Absenden des Formulares 
    };
    // Anbindung des betreffenden Formulares, dass per Ajax versendet werden soll (mehrere möglich) 
    $('#testform').ajaxForm(options) 
  });
</script>
 
</head>
<body>
 
  <form name="testform" id="testform" method="post" action="zieladresse.htm">
    <input type="hidden" name="field1"  id="field1" value="">
    <input type="text" name="field2"  id="field2" value=""><br>
    <input type="text" name="field3"  id="field3" value="">
    <input type="submit" value="absenden">
  </form>
 
  <div id="div_suchergebnisse">
    Hier landet das Ergebnis der Suche
  </div>
 
</body>
</html>

Es sind noch wesentlich mehr Optionen für diese Funktion verfügbar.
Mehr Informationen und Script-Download unter http://jquery.malsup.com/form/#getting-started