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”> </div>
