it-swarm.com.de

Übergeben Sie das gesamte Formular als Daten in der jQuery-Ajax-Funktion

Ich habe eine jQuery-Ajax-Funktion und möchte ein komplettes Formular als Post-Daten einreichen. Wir aktualisieren das Formular ständig, sodass es mühsam wird, die Formulareingaben, die in der Anforderung gesendet werden sollen, ständig zu aktualisieren.

126
Brian

Es gibt eine Funktion, die genau dies tut:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);
245
Will Vousden

serialize () ist keine gute Idee, wenn Sie ein Formular mit der Post-Methode senden möchten. Wenn Sie beispielsweise eine Datei über ajax übergeben möchten, funktioniert sie nicht.

die bessere Lösung ist, FormData zu erstellen und zu senden:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });
40
Moh Arjmandi

Im Allgemeinen verwenden Sie serialize() für das Formularelement.

Bitte beachten Sie, dass mehrere <select> -Optionen unter demselben Schlüssel serialisiert werden, z.

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

führt zu einer Abfragezeichenfolge, die mehrere Vorkommen des gleichen Abfrageparameters enthält:

[path]?foo=1&foo=2&foo=3&someotherparams...

was möglicherweise nicht das ist, was Sie im Backend wollen.

Ich verwende diesen JS-Code, um mehrere Parameter auf einen durch Kommas getrennten einzelnen Schlüssel zu reduzieren (der aus der Antwort eines Kommentators in einem Thread bei John Resig stattfand):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

was macht das oben in:

[path]?foo=1,2,3&someotherparams...

In Ihrem JS-Code würden Sie es so nennen:

var inputs = compress($("#your-form").serialize());

Hoffentlich hilft das.

23
nikola

Benutzen

serialisieren ()

var str = $("form").serialize();

Serialisieren Sie ein Formular in eine Abfragezeichenfolge, die in einer Ajax-Anforderung an einen Server gesendet werden kann.

14
rahul

Sie müssen nur die Daten buchen. und Verwenden von Jquery-Ajax-Funktionssatzparametern. Hier ist ein Beispiel.

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>
0
DANISH TAYYIB

Die anderen Lösungen funktionierten nicht für mich. Vielleicht verhindert der alte DOCTYPE in dem Projekt, an dem ich arbeite, HTML5-Optionen.

Meine Lösung:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}
0
rubo77

Eine gute jQuery-Option, um dies zu tun, ist durch FormData . Diese Methode eignet sich auch zum Senden von Dateien über ein Formular!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

Ihre Sendefunktion in jQuery würde folgendermaßen aussehen:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

um Daten zu Ihrem Formular hinzuzufügen, können Sie entweder eine versteckte Eingabe in Ihrem Formular verwenden oder Sie fügen diese im laufenden Betrieb hinzu:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );
0
patrick