Passar formulário inteiro como dados na function jQuery Ajax

Eu tenho uma function ajax jQuery e gostaria de enviar um formulário inteiro como dados de postagem. Estamos constantemente atualizando o formulário para que se torne tedioso atualizar constantemente as inputs do formulário que devem ser enviadas na solicitação.

Existe uma function que faz exatamente isso:

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

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

serialize () não é uma boa idéia se você quiser enviar um formulário com o método post. Por exemplo, se você quiser passar um arquivo via ajax não vai funcionar.

A melhor solução é fazer um FormData e enviá-lo:

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

Em geral, use serialize() no elemento form.

Por favor, tenha em mente que várias opções

  

resultará em uma string de consulta que inclui várias ocorrências do mesmo parâmetro de consulta:

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

o que pode não ser o que você quer no backend.

Eu uso esse código JS para reduzir vários parâmetros para uma chave única separada por vírgula (descaradamente copiada da resposta de um comentarista em um encadeamento no local de John Resig):

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

que transforma o acima em:

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

Em seu código JS, você chamaria assim:

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

Espero que ajude.

Usar

serializar ()

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

Serialize um formulário para uma cadeia de consulta, que poderia ser enviada para um servidor em uma solicitação Ajax.

Uma boa opção do jQuery para fazer isso é através do FormData . Este método também é adequado ao enviar arquivos por meio de um formulário!

 

Sua function de envio no jQuery ficaria assim:

 $( '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 adicionar dados ao seu formulário, você pode usar uma input oculta em seu formulário ou adicioná-la imediatamente:

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

Você só precisa postar os dados. e Usando os parâmetros do conjunto de funções do jquery ajax. Aqui está um exemplo.

  

As outras soluções não funcionaram para mim. Talvez o antigo DOCTYPE no projeto em que estou trabalhando previna as opções do HTML5.

Minha solução:

 

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