EJEMPLOS
Sencilla llamada AJAX a un
fichero externo que ejecutará un proceso (una suma entre dos valores enviados
mediante POST) y nos devolverá la salida correspondiente apoyándonos con la
librería jQuery, que aunque
no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que
nos proporciona.
código del
fichero de entrada de datos:
<html>
<head>
<title>Ejemplo sencillo de
AJAX</title>
<script type="text/javascript"
src="/js/jquery.js"></script>
<script>
function realizaProceso(valorCaja1,
valorCaja2){
var parametros = {
"valorCaja1" :
valorCaja1,
"valorCaja2" :
valorCaja2
};
$.ajax({
data: parametros,
url:
'ejemplo_ajax_proceso.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>
En
este código, utilizamos los id de las cajas de texto para pasarle sus valores a
la función “realizaProceso”. En esta función recogemos los valores de
entrada en un array parametros y enviamos mediante AJAX especificando el
parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).
Por
último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a
realizar mientras se procesan los datos y tras terminar de procesarlos (en este
caso jugar con el contenido HTML del id resultado).
Ahora
vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php)
que únicamente suma los datos recibidos por POST:
<?php
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];
echo $resultado;
?>
0 comentarios:
Publicar un comentario