Código HTML:
<html>
<head>
<title>Ejemplo sencillo de AJAX</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function realizaProceso(valorCaja1, valorCaja2){
var parametros = {
"valorCaja1" : valorCaja1,
"valorCaja2" : valorCaja2
};
$.ajax({
data: parametros,
url: 'www.ente42.com/demo.php',
type: 'post',
beforeSend: function () {
$("#resultado").html("Procesando, espere por favor...");
},
success: function (response) {
$("#resultado").html(response);
}
});
}
</script>
</head>
<body>
Introduce valor 1
<input type="text" name="caja_texto" id="valor1" value="0"/>
Introduce valor 2
<input type="text" name="caja_texto" id="valor2" value="0"/>
Realiza suma
<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>
<br/>
Resultado: <span id="resultado">0</span>
</body>
</html> este es el codigo php
<?php
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];
echo $resultado;
?>