¡Ajaxificando un formulario!

Detalles: Publicado: Sábado, 20 Septiembre 2008 12:00; Escrito por Leonardo De Seta

He aquí una disculpa a todos los usuarios de sitios que ayudé a construir: "Lo siento si les hice sufrir refrescos innecesarios en las páginas". O al menos, esto es lo que me vino a la cabeza cuando aprendí lo facil que es usar jQuery para evitar los refrescos de página al enviar un formulario.

jQuery es una librería JavaScript espectacular, con un nombre bastante confuso. De forma muy simple permite agregar funcionalidad a las páginas, de manera no obstrusiva. Ofrece un marco general para trabajar con JavaScript, y además es extensible a través de plugins.

Y entre estos plugins se encuentra jQuery Form, que nos permite "Ajaxificar" un formulario cualquiera (si, acabo de inventar esa palabra, ¿y qué?), de manera que su procesamiento ocurra en segundo plano, y los resultados de la invocación se muestren automáticamente en alguna sección de la página.

Una página de consulta tradicional

Supongamos que tenemos una página de consulta de Invasores. La página tiene un campo para ingresar el texto de búsqueda, un botón de "Enviar" y finalmente abajo se muestran los resultados luego de hacer click en el botón.

La página "tradicional" de consulta podría ser algo como esto:

 
<html>
    <body>
        <h2>Consulta de Invasores</h2>
 
        <form id="formBusqueda" action="consulta.jsp">
            <input type="text" name="consulta" />
            <input type="submit" value="Buscar" />
        </form>
 
        <c:if test="${not empty resultadosDeBusqueda}">
            <div id="resultados">
                <%-- Aca se recorren los resultados y se muestran... --%>
            </div>
        </c:if>         
    </body> 
</html>

Esta página "tradicional" requiere refrescarse en forma completa para poder mostrar los datos. Veremos a continuación como podemos usar jQuery Form para brindar una mejor experiencia al usuario (y no destruir practicamente nada en el camino!).

Presentando jQuery Form

jQuery Form es un plugin para jQuery que permite manipular formularios. En particular, permite convertir un formulario cualquier al "estilo ajax": es decir, el envio de datos del formulario no provocará que se refresque la página. En cambio, el post se realizará por JavaScript en segundo plano, y el resultado de dicha invoación se mostrará en un DIV aparte.

De esta manera es muy simple convertir una consulta cualquiera que ya tengamos.

Para usar jQuery Form necesitamos:

Incluir la librería JavaScript jQuery su plugin jQuery Form.
Crear dos páginas: una con el formulario, y otra que muestre los datos.
Usar jQuery Form para "ajaxificar" a nuestro formulario, indicando en qué DIV tendráb que ubicarse los resultados del submit

El ejemplo a continuación usa las páginas consulta.jsp (que muestra el formulario) y procesarConsulta.jsp que dibuja una lista con los resultados de la búsqueda. Este mismo ejemplo se puede integrar con cualquier tecnología web (sea JSP, Struts, Spring MVC, JSF, ASP, Ruby, etc.)

La porción importante de código es el script JavaScript, donde utilizamos jQuery para convertir nuestro formulario común a un formulario "ajax", e indicamos que el resultado de la invocación del formulario se muestre en el DIV con id "resultados".

consulta.jsp

 
<html>
    <head>
        <script type="text/javascript" src="/resources/jquery/jquery.js"></script>
        <script type="text/javascript" src="/resources/jquery/jquery.form.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#formBusqueda").ajaxForm({
                    type: "POST",
                    target: "#resultados"
                });   
            });
        </script>
    </head>
    <body>
        <h2>Consulta de Invasores</h2>
 
        <form id="formBusqueda" action="procesarConsulta.jsp">
            <input type="text" name="consulta" />
            <input type="submit" value="Buscar" />
        </form>
 
        <div id="resultados"></div>
 
    </body>
</html>

procesarConsulta.jsp

 
<%
    //Esta pagina mostraria resultados de una consulta más compleja...
    String consulta = request.getParameter("consulta");
%>
<h2>Resultados de la busqueda</h2>
<ul>
    <li>Primer resultado de la busqueda <%=consulta%> </li>
    <li>Segundo resultado de la busqueda <%=consulta%> </li>
    <li>Tercer resultado de la busqueda <%=consulta%> </li>
    <li>Y asi...  </li>
</ul>

Al hacer click en el botón "Buscar" de la página consulta.jsp se invoca a procesarConsulta.jsp, la cual "resuelve" la búsqueda. El resultado de la invocación de procesarConsulta.jsp se mostrará dentro del DIV "resultados" de la página consulta.jsp, sin provocar un refresco completo. ¡Un resultado 100% ajax! :D

Descargar proyecto de ejemplo

Pueden descargar un proyecto de ejemplo de jQuery Form con el código aquí mostrado y todas las librerías necesarias para su ejecución.

Basado en la nota Your first cup of Web 2.0: a quick look at jQuery, Spring MVC and XStraem/Jettison