Pasar formulario completo como datos en la función jQuery Ajax

Tengo una función jQuery ajax y me gustaría enviar 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 solicitud.

Hay una función que hace exactamente esto:

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

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

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 un 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 } }); 

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

Tenga en cuenta que las múltiples

  

dará como resultado una cadena de consulta que incluye múltiples ocurrencias del mismo parámetro de consulta:

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

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

Uso este código JS para reducir múltiples parámetros a una sola clave separada por comas (copia descaradamente de la respuesta de un comentarista en un hilo en el lugar de John Resig):

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

que convierte lo anterior en:

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

En tu código JS lo llamarías así:

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

Espero que ayude.

Utilizar

serializar ()

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

Serializar un formulario a una cadena de consulta, que podría enviarse a un servidor en una solicitud de Ajax.

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!

 

Su función de envío en 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 agregar datos a su formulario, puede usar una entrada oculta en su formulario o agregarlo sobre la marcha:

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

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

  

Las otras soluciones no funcionaron para mí. Quizás el viejo DOCTYPE en el proyecto en el que estoy trabajando impida las opciones de HTML5.

Mi solución:

 

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) } }); } 
 
. . .