Enviar formulário para o php sem refresh – jQuery.ajax

Eu havia postado, como enviar um formulário com ajax, aproveitando o callback submitHandler do jQuery.validate.

Porém, se vc não estiver usando esse plugin, e quiser apenas usar o ajax do jQuery, o seguinte basta:

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('#ajax_form').submit(function(){
			var dados = jQuery( this ).serialize();

			jQuery.ajax({
				type: "POST",
				url: "processa.php",
				data: dados,
				success: function( data )
				{
					alert( data );
				}
			});

			return false;
		});
	});
	</script>
</head>
<body>
	<form method="post" action="" id="ajax_form">
		<label><input type="hidden" name="id" value="" /></label>
		<label>Nome: <input type="text" name="nome" value="" /></label>
		<label>Email: <input type="text" name="email" value="" /></label>
		<label>Telefone: <input type="text" name="telefone" value="" /></label>

		<label><input type="submit" name="enviar" value="Enviar" /></label>
	</form>
</body>
</html>

Primeiro eu importo a lib jQuery:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Nada de novo até aqui.

Faço corretamente, e disparo a minha função no evento onsubmit do formulário:

		jQuery('#ajax_form').submit(function(){

Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.

O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false; que envio na linha 19

			return false;

Daí em diante, não tem segredo, é o mesmo miolo que usei para enviar com o jQuery.validate.
De graça, o método .serialize(), cria a query string com os dados do formulário, e usamos essa variavel para enviar a função ajax.

Ali no success: function( data ) (linha 13), é o callback que será disparado, assim que a requisição retornar(status 200 e tal).

Bom, é isso =)
Comentem, compartilhem. Sei que é um assunto já bastante “batido”, porém não me custava deixar um código bem escrito, até para tentar minimizar os efeitos dos maus tutoriais.

Sugiro informar “type” nas propriedades do AJAX como sendo o mesmo valor do atributo METHOD do formulário. Fica mais genérico

Comment by Evandro Oliveira — January 20, 2012 @ 11:09 am

Sim sim, perfeita sugestão.
Esse post saiu “as pressas” pq é uma introdução para o próximo. =)

Nele eu faço todas essas otimizações. =) Vlw!

Comment by admin — January 20, 2012 @ 11:55 am

Pra quem tiver interesse no assunto, eu fiz um plugin pro jQuery chamado Auto-Ajax que serve pra isso, enviar um form por ajax sem refresh na página. E ele funciona sem você precisar escrever uma linha de javascript.

Quem quiser aprender mais a fundo, pode olhar o código fonte do meu plugin. Ele é open source e está disponível no github: https://github.com/bighi/Auto-Ajax

Comment by Leonardo Bighi — January 30, 2012 @ 11:30 am

Desenvolvedor FrontEnd – wbruno