jQuery – Post em Ajax

Para realizar um post em ajax com o componente javascript jQuery é bastante simples.

Basta configurar o javascritpt com os seguintes atributos, segundo o exemplo abaixo:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>
jQuery(function()
{
//posta
jQuery(“#bt_enviar”).click(function() {
jQuery.ajax({
type: “POST”,
url: “posta_carrega.php”,
data: jQuery(“form”).serialize(),
success: function(msg){
jQuery(“#msg_sucesso”).html(msg);
jQuery(“form”)[ 0 ].reset();
jQuery(“#tabela”).animate({height: ‘toggle’, opacity: ‘toggle’},”slow”);
//alert(msg);
}
});
});
});
</script>

Ou seja, quando o usuário clicar no botão cujo id seja bt_enviar o aplicativo irá postar (type: “POST”) no php posta_carrega.php(url: “posta_carrega.php”), os atributos do form relativo a aquele botão.

Exemplo do form:

<form id=”formEnvia” name=”formEnvia” method=”post” action=”#”>
Nome: <input type=”text” name=”nome” id=”nome” class=”campos” />
E-mail: <input name=”email” type=”text” class=”campos” id=”email” />
Mensagem: <textarea name=”texto” rows=”3″ class=”campos” id=”texto”></textarea>

<input name=”bt_enviar” type=”submit” class=”campos” id=”bt_enviar” value=”Envia” onclick=”return false” />
</form>

O retorno será excrito na tag cujo o id seja “msg_sucesso” (jQuery(“#msg_sucesso”).html(msg);) e então o formulário recebe as seguintes ações: apagar os campos: jQuery(“form”)[ 0 ].reset(); e animar para que ele suma: jQuery(“#tabela”).animate({height: ‘toggle’, opacity: ‘toggle’},”slow”);

Exemplo da div:

<div id=”msg_sucesso”>&nbsp;</div>