ENVIAR UN FORMULARIO CON AJAX – jQuery

Los formularios son la parte esencial de una aplicación que requiera interacción con el cliente, mediante estos realizamos la captura de información requerida para una transacción en nuestra aplicación y posteriormente procedemos a enviar el formulario a un script en nuestro servidor para proceder a digerir y procesar estos datos.

El envió de estos datos se puede realizar mediante los Metodos POST o GET que nos ofrece HTML para intercambiar información entre páginas, comúnmente este envió de información se realiza pasando los datos mientras cargamos la siguiente página al mismo tiempo. Este método es muy fácil y es el más utilizado pero tiene muchos inconvenientes, ya que perdemos la página que teníamos cargada anteriormente y también si quisiéramos devolver mensajes de errores tendríamos que maquetar otra página para mostrarlos.

Todo lo anterior se puede resolver utilizando la Tecnología de peticiones Asincronas al Servidor AJAX (ver mas…), esto nos permite enviar datos al servidor sin necesidad de recargar la página.

En este tutorial, realizaremos un ejemplo mediante el cual procederemos a Enviar Un Formulario con AJAX al servidor y nos retornara como mensaje los datos enviados, los cuales mostraremos en nuestra misma página HTML, sin necesidad de recargarla.

    1. Creamos un Archivo HTML con la siguiente Estructura.

    1. Procedemos a cargar el CDN de la Librería JavaScript jQuery.

  1. Creamos la función que se encargara de enviar los datos.

La función AJAX, cuenta con un sinfín de parámetros para poder ser utilizada en distintos ámbitos, en este turial solo explicaremos los parámetros básicos y los necesarios para poder enviar datos al servidor, si les interesa explorar mas a fondo pueden indagar en la documentación de jQueryAjax.

    • url: Es la url del script a donde envaremos los datos.

type: Tipo de envió que se realizara, GET o POST.

  • dataType: tipo de datos que se devolverá: HTML, JSON, etc.. Si no lo colocamos, tratara de detectar el tipo automáticamente
  • data: Datos que se le enviaran al servidor, se envían de la manera {data:”Valor”,data2:”Valor”}.

 

Como podremos observar en el código de abajo, integramos una función .done, esta función detecta el momento en el que finaliza la transacción con el servidor y recupera la respuesta del mismo dentro del parámetro data.

Al final, nuestro index.html Tendra la siguiente estructura.

  1. Finalmente, Creamos nuestro script php llamado php que va a recibir los datos.

 

    1. Probamos nuestra aplicación.
ENVIAR UN FORMULARIO POST

Probando la aplicación

 

De esta manera, podemos hacer uso de la tecnología AJAX para poder hacer peticiones a nuestro servidor y de la misma manera procesar la respuesta que este nos envié, ahora podemos indagar más y agregarle nuestras funciones personalizadas.

Espero que este tutorial, sea de ayuda para alguno de ustedes y los invito a indagar más sobre esta maravillosa tecnología. No olviden comentar cualquier duda que tengan y si necesitan algun Articulo al respecto.

Angel Gutierrez Monola

Developer Boy Amante de la tecnología. Apasionado del Béisbol⚾ Fundador de http://Gumonet.com Emprendedor por Pasión Y Lector por distracción.

You may also like...

2 Responses

  1. Eduardo R. dice:

    Antes que nada un saludo Angel, y un agradecimiento por el tiempo que te has tomado en escribir este post.

    Quiero consultarte algo concreto, pero antes quiero que sepas que a penas tengo pocos meses programando en PHP y hay formas de hacer las cosas que se escapan de mi conocimiento, y esa es la razón por la cual te hago esta consulta. Lo he preguntado a personas de mi entorno pero no me explican como hacerlo, solo me confirman que se puede hacer con jQuery y Ajax, pido por favor me des una orientación más precisa si te es posible. Ahora sí, a lo que voy y perdona lo extenso:

    1) Tengo un tabla hecha con bootstrap que me muestra los datos de usuarios registrados en mi BdD (uso PostgreSQL).
    2) Para mostrar esos datos tengo un controlador que hace una llamada a un modelo, extrae los datos y el controlador los muestra en una vista (patrón MVC).
    3) Toda esa comunicación fluye perfectamente, en la tabla tengo un botón radio para seleccionar el usuario específico y un icono Editar. Como ya sabes, al darle clic me muestra una vista con un formulario y los datos precargados de ese usuario especifico que serán editados.
    4) De la forma tradicional no hay ningún inconveniente, pero cuando intenté hacerlo a través de una ventana modal “Olvidenlo!!” me engalleté todo. Me hablan de Ajax, de jQuery, de JSON, pero nadie me explica como hacerlo, o al menos como hacer lo que quiero hacer, no se qué agregar, qué poner, qué quitar, pero sobre todo, no sé como pasar eso al controlador para trabaje junto al modelo (como lo hace en la forma tradicional) y me abra la ventana modal de bootstrap con el formulario y los datos precargados para editarlos.
    5) Con la ventana modal no hay problema, sé como crear formularios en ella, como hacer que se oculte, que se muestre, todo lo relacionado como Modal en bootstrap. Donde no he podido avanzar es en la captura de datos pasandolos por el controlador y el modelo. Desconozco en este punto si Ajax actua como reemplazo del modelo comunicandose directamente con el Servidor. O si hay una manera de hacerlo con MVC y la ventana modal.

    Pregunto, despues de esta larga explicación y en verdad me disculpo: ¿Cómo lo harías tú? ¿Qué pasos seguirías? No te pido que lo hagas por mi, sino que me guíes desde un paso 1 crea tu modal, paso 2 crea tu controlador, paso 3 has tal cosa, paso 4 etc, así pues. No sé si lo hayas hecho antes, y bueno si he visto como hacerlo con modal, pero no usando MVC, he ahí el reto y la dificultad, al menos para mi.

    Saludos y muchas gracias por compartir tus conocimientos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *