Artigo: Envio de Formulário com Ajax - Gigasystems

JavaScript

Em por

envio-de-formulario-com-ajax
Envio de Formulário com Ajax

No artigo de hoje mostrarei uma maneira simples de conseguirmos resgatar os valores do form com funções nativas do Jquery e enviá-los via Ajax para algum tipo de processamento dinâmico, ou seja, sem reload de página.

Envio de Formulário com Ajax

Bem, podemos fazer esse envio de algumas formas correto. Porém alguns métodos de desenvolvimento não são tão vantajosos assim, vejamos um exemplo.

Já vi em vários Posts em Blogs/Sites os programadores resgatarem os valores dos inputs da seguinte forma:

 Var nome = $('#campo1').val();

Declaram uma variável, iniciam o seletor e através do ID do input resgatam seu valor, um a um. E quando vão passar os valores via POST no ajax, montam uma URL imensa da seguinte maneira:

 data : 'nome='+ $('#campo1').val() +'&sobrenome='+ $('#campo2').val(),

Algo meio grande e desnecessário, pois imaginemos que precisamos submeter um form com 15 campos de cadastro, imagina só o trabalho que teremos para o funcionamento do mesmo.

Pegando dados com o método $.fn.serialize

Pensando nisso, o jQuery já solucionou nosso problema, e eu os apresento, os métodos $.fn.serialize e $.fn.serializeArray.

Na qual basta iniciarmos o seletor e informamos o ID do form e aplicarmos a função serialize, e ele fará todo o processo internamente, na qual nos resultará em uma string prontinha para ser enviada através do ajax como abaixo:

 nome=leonardo&email=leonardo%40hotmail.com&msg=Minha%menssagem

E para resgatarmos os valores dessa string é simples, se minha requisição for via POST, basta resgatarmos via POST do PHP:

 $nome = $_POST[‘nome’]; $email = $_POST[‘email’]; $msg = $_POST[‘msg’];

E prontinho, podemos trabalhar com os valores das variáveis recebidas como desejar, seja num processamento de dados em nosso BD ou apenas para exibi-la em algum lugar da tela.

Pegando dados com o método $.fn.serializeArray

Não muito diferente do $.fn.serialize, ele vai pegar todos os dados dos input só que vai guardar tudo em um objeto, deixando pronto para enviarmos. Não há nenhuma diferença em termos de performance.

 $('input[type=submit]').click(function(e){ //setamos para quando submeter não atualizar a pagina e.preventDefault(); //o serialize retorna uma string pronta para ser enviada var valores = $('#form').serializeArray(); //colocamos no console para vermos console.log(valores); });

Parece mais complicado, mas não muda nada, você pode resgatar as variáveis da mesma forma usando PHP.

Bem hoje foi apresentado como melhorar nossa programação com menos linhas de código e mais objetiva, utilizando funções nativas que facilitam e muito nossa vida, basta termos conhecimentos delas e sabermos usa-las corretamente.

Dúvidas, críticas ou sugestões comentem abaixo que termos o prazer em tentar ajuda-los. =)

Olá, deixe seu comentário para Envio de Formulário com Ajax

Já temos 2 comentário(s). DEIXE O SEU :)
Pedro Dark

Pedro Dark

Não deu certo
★☆☆☆☆DIA 20.12.21 14h52RESPONDER
N/A
Enviando Comentário Fechar :/
Paulo abcd

Paulo abcd

Muito boa a dica, pra quem já sabe. Se tivesse feito um pequeno exemplo, aí sim, teria ajudado de fato.
★☆☆☆☆DIA 18.07.20 15h09RESPONDER
N/A
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: JavaScript

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.

Usamos cookies para manter o site seguro, registrar e personalizar sua navegação. Para mais detalhes sobre essa atividade, acesse nossa Politica de Privacidade

Entendi