Ajax não obstrutivo com preventDefault

Olá pessoal,

Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P

Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.

Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.

E como evitar esse tipo de coisa?

Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?

Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!

<form action="/users/" method="post" id="newUser">
	<input type="text" name="title" />
	<input type="submit" value="Enviar" />
</form>

$('form#newUser').submit(function(event){
	event.preventDefault(); //Este é o cara!
	var actionUrl = $(this).attr('action'),
		params = $(this).serializeArray();
	$.post(
		actionUrl,
		params,
		function(){
			alert('Formulário enviado com sucesso!');
		}
	);
 });
 

Algumas boas práticas podem ser vistas nesse código.

• A url que é enviada via ajax é igual a do html;
• Os parâmetros são carregados pelo serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;
• Se o JavaScript estiver desabilitado, o envio será feito da mesma forma. O ideal é ter um tratamento no back-end para fazer retornos agradáveis ao usuário.

Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário.

preventDefault() vs return false

Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.

---