Tutorial #29 del curso de Jquery, en este tutorial damos por finalizado la parte de ajax, viendo el método ajax() que es el método más completo de esta librería, construiremos una calculadora básica para las operaciónes aritméticas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax - Calculadora</title>
<style type="text/css">
#resultado{
font-size: 32px;
color: blue;
}
</style>
</head>
<body>
<center>
<h1>Calculadora JQuery - Ajax</h1>
<form id="calculadora">
<label>Primer Numero </label>
<input type="text" name="num_a">
<label>Segundo Numero</label>
<input type="text" name="num_b">
<label>Operación</label>
<select name="operacion">
<option value="suma">Sumar</option>
<option value="resta">Restar</option>
<option value="multiplicacion">Multiplicar</option>
<option value="division">Dividir</option>
</select>
<input type="button" value="Calcular" id="calcular">
</form>
<br><br>
<div id="resultado"></div>
</center>
<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#calcular').click(function(event) {
var datos = $('#calculadora').serialize();
$('#resultado').html('<img src="img/719.gif">');
$.ajax({
url:'calculadora.php',
type:'POST',
dataType:'json',
data: datos
}).done(function(data){
$('#resultado').text('La '+ $('[name=operacion]').val() + ' de ' + data.num_a + ' y ' + data.num_b + ' = ' + data.resultado);
$('#resultado').attr('src', '');
})
});
});
</script>
</body>
</html><?php
$a = $_POST['num_a'];
$b = $_POST['num_b'];
$op = $_POST['operacion'];
sleep(2);
switch ($op) {
case 'suma':
$res = $a+$b;
break;
case 'resta':
$res = $a-$b;
break;
case 'multiplicacion':
$res = $a*$b;
break;
case 'division':
$res = $a/$b;
break;
}
echo json_encode(array("num_a"=>$a,"num_b"=>$b,"resultado"=>$res));