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

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

Es gibt eine Funktion, die genau das tut:

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

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

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 dies nicht.

Angenommen, wir haben ein Formular mit dieser ID: "myform".

Die bessere Lösung besteht darin, 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
        }
    });

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

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 desselben Abfrageparameters enthält:

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

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

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

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

das macht das oben genannte 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.

Verwenden

serialize ()

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

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

Eine gute jQuery-Option hierfür ist 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 Ihrem Formular Daten hinzuzufügen, können Sie entweder eine versteckte Eingabe in Ihrem Formular verwenden oder diese im laufenden Betrieb hinzufügen:

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

Sie müssen nur die Daten posten. 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>

Die anderen Lösungen haben bei mir nicht funktioniert. 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)
        }
    });
}