Comencemos por el formulario. Nuestra pequeña aplicación de ejemplo no hará más que tomar dos números y sumarlos en el servidor. No es nada que no pudiéramos hacer en la parte de cliente usando JavaScript, por lo que no es un ejemplo muy espectacular, pero sí instructivo. Necesitaremos 2 cajas de texto y un botón de enviar. Tendremos también una etiqueta <p> bajo el formulario, que será donde se muestre el resultado.
Vayamos ahora con el código JavaScript que enviará el formulario y actualizará la página con el resultado. Una vez añadido este código, este sería el aspecto de la página:
<script type=»text/javascript» src=»jquery-1.4.2.js»></script> <script type=»text/javascript»> $(‘#formularioSuma’).submit(function(event) { event.preventDefault(); var url = $(this).attr(‘action’); var datos = $(this).serialize(); $.get(url, datos, function(resultado) { $(‘#resultado’).html(resultado); }); }); </script>
Como vemos, lo que hace este código es establecer una función a utilizar como manejador para el evento submit del formulario, evento que se produce al intentar enviarlo.
Esta función se encarga de bloquear el comportamiento por defecto conevent.preventDefault(), de forma que el formulario no se envíe de forma síncrona; obtener la URL a la que enviar el formulario de su atributo action, serializar los datos del formulario para enviarlos en la petición con serialize() y, por último, enviar estos datos utilizando una petición GET, mediante el método del mismo nombre.
El tercer argumento de get es, como recordaréis, una función de callback que será llamada cuando termine de ejecutarse la petición. En nuestro caso, esta función no hará más que sustituir el contenido de la etiqueta <p> con el resultado devuelto por la página PHP, ya sea este un error o la suma de ambos números.
Si imprimimos la variable datos veremos que es una simple cadena con los datos codificados como si se tratara de parámetros en una URL. Si fuéramos a sumar 10 y 20, por ejemplo, su aspecto sería:
num1=2&num2=2
jQuery es lo bastante inteligente para añadir esta cadena a la URL en caso de que se trate de una petición GET, por lo que el resultado sería algo como http://servidor.com/sumar.php?num1=10&num2=20 o dentro de la petición si se envía por POST. El acceso a estos datos en el archivo PHP, por tanto, es de lo más sencillo; sólo tenemos que utilizar las matrices superglobales $_GET y $_POST para acceder directamente a los valores.
<?php
if(is_numeric($_GET[‘num1’]) and is_numeric($_GET[‘num2’]))
echo $_GET[‘num1’] + $_GET[‘num2’];
else
echo ‘Los operandos no son correctos’;
?>
Otra opción, a parte de serialize, habría sido utilizar el método serializeArray. Mientras que el primero genera una cadena con los parámetros codificados como si de una URL se tratase, como ya comentamos, la segunda produciría un array de objetos. No obstante, el acceso a los datos en el archivo PHP sería exactamente igual en ambos casos, ya que jQuery se encargaría de procesar el array.
