Wie ein Formular mit vielen Feldern mit jQuery schreiben?

Question

Obwohl $ Schnipsel () verwendet werden kann Ajax Dinge zu tun, ich glaube nicht, seine fit für Werte einer großen Form veröffentlichen.

Wie würden Sie post eine große Form (viele Felder) ohne alle sie von Hand eingeben?

Answer 1

Was ist Ihre Argumentation hinter dieser Annahme? POST wird für die Übertragung größerer Datenmengen ausgelegt als GET. Eine AJAX POST-Anforderung ist fast genau das gleiche wie eine „normale“ POST-Anfrage, es ist nur gebündelt und intern von einem Browser auf eine etwas anderen Art und Weise behandelt. Ein paar Header könnte etwas unterschiedlich sein, aber die Daten sind alle gleich. Warum soll AJAX nicht eine „große“ Form zu handhaben?

Was würden Sie sogar als eine „große“ Form ohnehin definieren?

Edit: Danke für die Aufklärung auf Ihrer Frage. Ich verstehe, was Sie fragen sich jetzt, und ich sehe, wo du herkommst. Für eine Form mit vielen Eingängen, könnte es ein Schmerz sein, es zu bündeln in eine Ajax-Anfrage die ganze Zeit.

Da Sie jQuery verwenden, gibt es eine einfache Lösung für dieses Problem. Schauen Sie sich die serialize () Methode. Sie geben ihm eine Form, und es gibt Ihnen wieder eine Abfragezeichenfolge aller Formulareingabeelemente und Werte, die Sie direkt an eine Ajax-Anforderung passieren kann. Es gibt es ein Beispiel für die manuelle Seite, die zeigt, wie es gemacht wird.

Alles, was Sie tun müssen, ist dies:

$.ajax({
    data: $("form").serialize(),
    //etc.
});

Dabei gilt "form" die ID des Formulars ist.

Answer 2

Sie wollen wahrscheinlich serialize , wenn Sie nicht wollen, manuell mit jedem Element beschäftigen .

$.ajax({
   type: "POST",
   url: "form.php",
   data: $("#form_id").serialize()
   success: function(msg) {
     alert("Form Submitted: " + msg);
   }
 });

Answer 3

Sie können mit jQuery.post( url, data, callback, type) , als einfacher jQuery.ajax( options ) .

Durch die Verwendung von serialize , können Sie automatisch das gesamte Formular senden.

$.post("/post_handler/",
    $("form#my_form").serialize(),
    function(json){
        /*your success code*/
    }, "json");

Ein vollständigeres Beispiel:

<script>
$().ready(function(){
    $("form#my_form submit").click(function(){
        $.post("/post_handler/",
            $("form#my_form").serialize(),
            function(json){
                /*your success code*/
            }, "json");
        return false;
    });
}
</script>
<form id="my_form" action="/post_handler/" method="post">
  <input type="text" name="text1" value="my text 1" />
  <input type="text" name="text2" value="my text 2" />
  <input type="submit" name="submit_button" value="Send" />
</form>

Dies würde überschreibt den Standard post, und führen Sie es mit AJAX.

Answer 4

Wenn Sie es noch nicht versucht haben. Dann erstellen Sie eine BIG Form (jetzt, was Sie damit meinen) und verwenden $.ajax() oder jQuery Forms-Plugin, es zu senden. Sie werden wissen, ob es für diese Art von Dingen ist oder nicht!

EDIT: - (nach dem edit) Dann bildet Plugin für Sie! Geben Sie ihm einen Schuss.

Answer 5

Versuchen Sie die Jquery Form Plugin .

Es tut wahrscheinlich genau das, was Sie aus dem Kasten heraus tun müssen.

Answer 6

Ich habe ziemlich komplex (groß) bildet mit .ajax () $ geschickt und hatte kein Problem. Ich habe keine Dateien über AJAX-Anfragen gesendet, aber ich habe es getan gesehen und es funktioniert besser als traditionelle Beiträge, weil sie nicht den Browser nicht binden, während Sie das Hochladen sind.

auf Ihrem Kommentar Basierend auf @zombat, es ist meine Vermutung, dass Sie eine sehr große Anzahl von Eingängen haben, von denen die meisten die meiste Zeit leer sein wollen. Zwei Vorschläge hier 1) teilen die Eingänge in getrennte Formen und nur jeder senden, sobald sie berührt / abgeschlossen ist. 2) untersuchen den Zustand Ihrer Form mit JavaScript und wickeln Sie die Informationen in JSON oder XML, und stattdessen die Formulardaten der Entsendung, senden Sie einfach die Datenstruktur.

„Large“ sollte kein Problem sein, vielleicht können Sie ein besseres Adjektiv finden Ihre Daten zu beschreiben, die jeder werden wissen lassen, warum es schwer ist, zu senden.

Answer 7

Was Sie fragen, ist nicht schwer. Alles, was Sie tun müssen, ist der Inhalt der Form sammeln und es zu Ihrem Server übergeben (in der Regel JSON verwenden).

Werfen Sie einen Blick auf dieses Howto:

http: //code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59