Passa l’intero modulo come dati nella funzione Ajax di jQuery

Ho una funzione jQuery ajax e vorrei inviare un intero modulo come dati post. Aggiorniamo costantemente il modulo in modo che diventi noioso aggiornare costantemente gli input del modulo che devono essere inviati nella richiesta.

C’è una funzione che fa esattamente questo:

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

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

serialize () non è una buona idea se vuoi inviare un modulo con il metodo post. Ad esempio, se vuoi passare un file tramite ajax non funzionerà.

la soluzione migliore è creare un object FormData e inviarlo:

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

In generale usa serialize() sull’elemento form.

Si prega di tenere presente che più opzioni

  

genererà una stringa di query che include più occorrenze dello stesso parametro di query:

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

che potrebbe non essere quello che vuoi nel back-end.

Uso questo codice JS per ridurre più parametri a una singola chiave separata da virgole (copiata spudoratamente dalla risposta di un commentatore in una discussione a casa di John Resig):

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

che trasforma quanto sopra in:

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

Nel tuo codice JS lo chiameresti in questo modo:

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

Spero possa aiutare.

Uso

serialize ()

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

Serializzare un modulo in una stringa di query, che potrebbe essere inviato a un server in una richiesta Ajax.

Una buona opzione jQuery per farlo è tramite FormData . Questo metodo è adatto anche per l’invio di file tramite un modulo!

 

La tua funzione di invio in jQuery sarà simile a questa:

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

per aggiungere dati al tuo modulo puoi utilizzare un input nascosto nel modulo o aggiungerlo al volo:

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

Devi solo postare i dati. e Utilizzo dei parametri della funzione jquery ajax. Ecco un esempio.

  

Le altre soluzioni non hanno funzionato per me. Forse il vecchio DOCTYPE nel progetto a cui sto lavorando impedisce le opzioni HTML5.

La mia soluzione:

 

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