2009-09-11 12 views
17

Obwohl $ .ajax() verwendet werden kann, um Dinge zu ajaxieren, halte ich es nicht für geeignet, Werte einer großen Form zu veröffentlichen.Wie ein Formular mit vielen Feldern mit jQuery zu buchen?

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

+3

Ich denke, das OP bezieht sich auf das Posten eines Formulars mit vielen Feldern. Es gibt eine Menge Code, um zu schreiben, wenn Sie die Felder eins nach dem anderen posten und ich denke, dass das OP fragt, ob es eine Möglichkeit gibt, einfach alle Felder auf dem Formular zu posten. Diese Frage war sehr nützlich für mich. –

Antwort

42

Was sind Ihre Gründe für diese Annahme? POST ist für die Übertragung größerer Datenmengen als GET ausgelegt. Eine AJAX POST-Anfrage ist fast genau die gleiche wie eine "normale" POST-Anfrage, sie wird nur gebündelt und intern von einem Browser auf eine etwas andere Art und Weise behandelt. Ein paar Header könnten etwas anders sein, aber die Daten sind alle gleich. Warum sollte AJAX nicht mit einem "großen" Formular umgehen?

Was würden Sie überhaupt als "große" Form definieren?

Edit: Danke für die Klärung Ihrer Frage. Ich verstehe, was du jetzt fragst, und ich sehe, woher du kommst. Für ein Formular mit vielen Eingaben könnte es ein Problem sein, es ständig in einer Ajax-Anfrage zu bündeln.

Da Sie jQuery verwenden, gibt es dafür eine einfache Lösung. Schauen Sie sich die serialize() Methode an. Sie geben ihm ein Formular, und es gibt Ihnen eine Abfragezeichenfolge aller Formulareingabeelemente und -werte zurück, die Sie direkt an eine AJAX-Anforderung übergeben können. Es gibt ein Beispiel auf der Handbuchseite, das zeigt, wie es gemacht wird.

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

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

wo "form" die ID des Formulars ist.

+8

Ich stimme nicht zu, dass POST ist für die Übertragung größerer Datenmengen dann GET. POST dient dazu, den Status des Servers mit neuen Informationen zu ändern. GET dient zum Abrufen einer Ressource vom Server. –

+0

Wie funktioniert serialize()? Ich sorge mich um seine Leistung. – omg

+2

@John: Ja, das ist die primäre Absicht von jedem. Es gibt jedoch keine praktische Grenze für die Größe einer POST-Anfrage, während GET-Anfragen bekannte Grenzen haben, die Probleme verursachen, wenn sie überschritten werden. Ich nehme an, dass meine Verwendung des Ausdrucks "speziell für" geringfügig falsch ist, da dies bedeutet, dass dies der einzige Zweck von POST ist, was natürlich nicht die beabsichtigte Interpretation war. – zombat

1

Wenn Sie es noch nicht versucht haben. Dann erstellen Sie ein BIG Formular (was auch immer Sie damit meinen) und verwenden Sie $.ajax() oder jQuery Forms Plugin, um es zu posten. Sie werden wissen, ob es für diese Art von Dingen ist oder nicht!

EDIT: - (nach Ihrer Bearbeitung) Dann ist forms plugin für Sie! Versuch es einmal.

+0

Wissen Sie, wie es den Post-Inhalt entscheidet Automatisch (einige Standard-Mechanismus wie wenn wir das Formular abschicken) oder überprüfen Sie eins nach dem anderen? – omg

+0

@Shore Sie sagten, Sie müssen ** Daten manuell festlegen, was ist .. ** Dies wird automatisch alle Felder im Formular übermitteln. Sie können eine Teilmenge von Feldern in eine Abfragezeichenfolge serialisieren. Bitte überprüfen Sie ihre Dokumentation hier: http: //malsup.com/jquery/form/ – TheVillageIdiot

6

Sie können jQuery.post(url, data, callback, type) verwenden, da es einfacher zu jQuery.ajax(options) ist.

Mit serialize können Sie das gesamte Formular automatisch 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.

+0

Was ist mit der serialize() selbst? Wie ist es prinzipiell getan? – omg

+0

'$ (" form # my_form "). Serialize()' gibt Ihnen den Inhalt von '

' bereit, über das Kabel im Querystring-Format gesendet zu werden ('multiple = Multiple2 & check = check2 & radio = radio1'). – voyager

+0

Sie sprechen darüber, während ich frage, wie. – omg

10

Sie möchten wahrscheinlich serialize verwenden, wenn Sie nicht jedes Element manuell behandeln möchten.

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

Ich habe ziemlich komplexe (große) Formulare mit $ .ajax() gesendet und hatte kein Problem. Ich habe keine Dateien über Ajax-Anfragen gesendet, aber ich habe es gesehen und es funktioniert besser als herkömmliche Posts, weil es den Browser nicht bindet, während Sie hochladen.

Basierend auf Ihrem Kommentar zu @zombat, Ich vermute, dass Sie eine sehr große Anzahl von Eingaben haben, von denen die meisten die meiste Zeit leer sein werden. Zwei Vorschläge hier 1) teilen die Eingaben in separate Formulare und senden sie jeweils erst, sobald sie berührt/vervollständigt werden. 2) Untersuchen Sie den Zustand Ihres Formulars mit JavaScript und verpacken Sie die Informationen in JSON oder XML und posten Sie anstelle der Formulardaten nur die Datenstruktur.

"Groß" sollte kein Problem sein, vielleicht können Sie ein besseres Adjektiv finden, um Ihre Daten zu beschreiben, die jeden wissen lassen, warum es schwer ist, zu senden.

Verwandte Themen