Vollständige Form als Daten in jQuery Ajax-Funktion übergeben

Question

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

Answer 1

Es gibt eine Funktion, die tut genau dies:

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

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

Answer 2

Verwenden

serialize()

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

ein Formular zu einem Query-String serialisiert, die auf einen Server in einer Ajax-Anfrage gesendet werden können.

Answer 3

Im allgemeinen Gebrauch serialize() auf dem Formularelement.

Bitte beachten Sie, dass mehrere < wählen > Optionen unter dem gleichen Schlüssel, z.

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

wird in einer Abfragezeichenfolge führen, die mehrere Vorkommen des gleichen Abfrageparameter enthält:

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

, die möglicherweise nicht, was Sie im Backend wollen.

I diesen Code verwenden JS mehrere Parameter auf eine durch Kommata getrennte einzelne Taste (schamlos von einer Reaktion der Kommentator in einem über an John Resig Platz Thread kopiert) zu reduzieren:

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

, die in die oben dreht:

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

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

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

Hoffe das hilft.

Answer 4

serialize() ist keine gute Idee, wenn Sie ein Formular mit Post-Methode senden möchten. Zum Beispiel, wenn Sie eine Datei über Ajax weitergeben wollen, wird es nicht funktionieren.

die bessere Lösung ist es, eine Formdata zu machen und 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 
     } 
    }); 

Answer 5

Eine gute Option jQuery dies durch FormData zu tun ist. Diese Methode eignet sich auch beim 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 wie folgt 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); 
     } 
}); 

hinzufügen Daten zu Ihrem Formular können Sie entweder einen versteckten Eingang in Ihrem Formular verwenden, oder Sie es on the fly hinzufügen:

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

Answer 6

<form id="add-item-form"> 
    . . . 
</form> 

<script> 
    $('#add-item-form').submit(function (event) { 
     event.preventDefault(); 
     var data = $('#add-item-form').serialize(); 
     $.post("/Item/AddItem", data, function (response) { 
      . . . 
     }); 
    }); 
</script> 

Answer 7

Sie müssen nur die Daten veröffentlichen. und Verwenden von jquery ajax-Funktionsparameter festlegen. 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>