Post usando Ajax com MooTools
Caros leitores, neste artigo apresentarei como utilizar o método Post através de Ajax utilizando o MooTools.
Mesmo sendo um admirador do jQuery, resolvi utilizar o MooTools em meu novos projetos devido ao seus inúmeros recursos visuais. Este artigo não tem por finalidade fazer a comparação entre estas duas poderosas bibliotecas.
Sobre o MooTools
A Mootools é uma biblioteca Javascript compacta, modular, orientada a objetos e Open Source.
Exemplo Prático
Código xHTML + CSS + Java Script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post usando Ajax com MooTools</title>
<style>
fieldset {
padding: 1em;
font:80%/1 sans-serif;
width:20em;
border:1px dashed #333;
background-color:#F5F5F5;
}
label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
input {
border:1px solid #CCC;
padding:2px;
}
#retorno {
font-size:14px;
color:#F00;
font-weight:bold;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$('simplepost').addEvent('submit', function(e){
new Event(e).stop();
var myRequest = new Request.HTML ({
url: 'data.php',
data: {vnome: $('nome').value},
update: $('retorno')
}).send();
});
});
</script>
</head>
<body>
<form id="simplepost" name="simplepost" method="post" action="">
<fieldset>
<legend>Post usando Ajax com MooTools</legend>
<label>Nome:</label>
<input type="text" name="nome" id="nome" />
<p align="center">
<input type="submit" name="submit" id="submit" value="Enviar" />
</p>
<p>
<div id="retorno" />
</p>
</fieldset>
</form>
</body>
</html>
Código PHP
<?php
echo $_POST['vnome'];
?>
