Pase el formulario completo como datos en la función jQuery Ajax

Question

Tengo una función jQuery ajax y me gustaría obtener un formulario completo como datos de la publicación. Estamos constantemente actualizando el formulario, por lo que resulta tedioso actualizar constantemente las entradas del formulario que se deben enviar en la consulta.

Answer 1

Hay una función que hace exactamente esto:

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

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

Answer 2

Uso

serialize()

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

Serializar un formato a una cadena de consulta, que podría ser enviada a un servidor en una petición Ajax.

Answer 3

En el uso general serialize() en el elemento de formulario.

Tenga en cuenta que las <opciones> selectas se serializan con la misma clave, p. Ej.

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

resultará en una cadena de consulta que incluye múltiples ocurrencias de la misma parámetro de consulta:

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

que puede no ser lo que quiere en el back-end.

utilizo este JS código para reducir múltiples parámetros a una tecla separada por comas sola (sin vergüenza copiado de la respuesta de un comentarista en un hilo sobre en casa de John Resig):

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

que convierte a la anterior en:

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

En su código JS que se dice así:

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

Espero que ayude.

Answer 4

serialize() no es una buena idea si desea enviar un formulario con el método de publicación. Por ejemplo, si quieres pasar un archivo a través de ajax, no va a funcionar.

la mejor solución es hacer una FormData y enviarlo:

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

Una buena opción jQuery para hacer esto es a través de FormData. ¡Este método también es adecuado para enviar archivos a través de un formulario!

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

Su función de envío de jQuery se vería así:

$('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); 
     } 
}); 

para añadir datos a su forma se puede utilizar una entrada oculta en su forma, o lo añade al vuelo:

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

sólo hay que publicar los datos. y el uso de la función jquery ajax establece los parámetros. Aquí hay un ejemplo.

<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>