Cómo usar AJAX para enviar un formulario web

Es posible que haya leído nuestra guía jQuery. Una guía básica de JQuery para programadores de Javascript. Una guía básica de JQuery para programadores de Javascript. Si usted es un programador de Javascript, esta guía de JQuery lo ayudará a comenzar a codificar como un ninja. Lea más, así como la quinta parte de nuestro tutorial de jQuery sobre AJAX jQuery Tutorial (Parte 5): ¡AJAX todos ellos! Tutorial de jQuery (Parte 5): ¡AJAX todos ellos! A medida que nos acercamos al final de nuestra serie de mini tutoriales de jQuery, es hora de que echemos un vistazo más a fondo a una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Leer más, pero hoy te mostraré cómo usar AJAX para enviar dinámicamente un formulario web. JQuery es, con mucho, la forma más fácil de usar AJAX, así que consulte nuestro tutorial de inicio Tutorial de jQuery - Introducción: conceptos básicos y selectores Tutorial de jQuery - Introducción: conceptos básicos y selectores La semana pasada hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algún código y aprendamos cómo ... Lee más si eres un principiante. Saltemos a la derecha en.

Por qué usar AJAX

Te puedes estar preguntando “¿Por qué necesito AJAX??” HTML es perfectamente capaz de enviar formularios, y lo hace de una manera bastante sencilla. AJAX se implementa en una gran mayoría de páginas web, y su popularidad sigue aumentando.

El gran beneficio que aporta AJAX es la capacidad de carga parcial Partes de páginas web. Esto hace que las páginas parezcan más rápidas y con mayor capacidad de respuesta, y ahorra ancho de banda al tener que volver a cargar una pequeña parte de los datos en lugar de toda la página. Aquí hay algunos casos básicos de uso de AJAX:

• Compruebe si hay nuevos correos electrónicos regularmente.
• Actualizar una puntuación de fútbol en vivo cada 30 segundos..
• Actualizar el precio de una subasta en línea..

AJAX le brinda a usted, el desarrollador, una capacidad casi ilimitada para hacer que las páginas web sean rápidas, receptivas y rápidas, algo que sus visitantes le agradecerán.

El HTML

Antes de comenzar, necesitas un formulario HTML. Si no sabe qué es HTML, lea nuestra guía sobre cómo crear un sitio web para principiantes Cómo crear un sitio web: para principiantes Cómo hacer un sitio web: para principiantes Hoy lo guiaré a través del proceso de creación Un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré en cada paso del camino. Lee mas .

Aquí está el HTML que necesitas:

       
 Nombre:  Años:   
   

Este html define un formulario con algunos elementos. Note como hay acción y método atributos Estos definen dónde y cómo se envía el formulario. No son necesarios cuando está utilizando AJAX, pero es una buena idea usarlos, ya que garantiza que los visitantes de su sitio web puedan seguir utilizándolo si tienen JavaScript desactivado. Esta página incluye jQuery alojado por Google en su CDN Qué son los CDN y por qué el almacenamiento ya no es un problema Qué son los CDN y por qué el almacenamiento ya no es un problema Los CDN hacen que Internet sea más rápido y los sitios web asequibles, incluso cuando se escala a millones de usuarios. En primer lugar, el ancho de banda cuesta dinero; Aquellos de nosotros con contratos limitados sabemos que muy bien. No solo tú… Leer más. los cabeza contiene una guión etiqueta - aquí es donde escribirás tu código.

Esta forma puede parecer un poco aburrida en este momento, por lo que debería considerar aprender CSS 5 Baby Steps to Learning CSS y Convertirse en un Kick-Ass CSS Sorcerer 5 Baby Steps to Learning CSS y Convertirse en un Kick-Ass CSS Sorcerer CSS es el único Las páginas web sobre cambios más importantes se han visto en la última década, y allanaron el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más para animarla un poco.

El JavaScript

Hay varias formas de enviar formularios con JavaScript. La primera y más sencilla forma de hacerlo es a través de enviar método:

document.getElementById ('myForm'). submit ();

Por supuesto, puede dirigir el formulario con jQuery si lo prefiere, no hay ninguna diferencia:

$ ('# myForm'). submit ();

Este comando le dice a su navegador que envíe el formulario, exactamente como presionar el botón enviar. Se dirige a la forma por su id, y en este caso, eso es mi forma. Esto no es AJAX, por lo que recargará toda la página, algo que no siempre es deseable.

En el método atributo de su formulario, especificó cómo enviar el formulario. Esto puede ser ENVIAR o OBTENER. Este atributo no se usa cuando se envían formularios utilizando AJAX, pero se puede usar el mismo método.

Gran parte de la web moderna se ejecuta fuera de las solicitudes GET o POST. En general, GET se utiliza para recuperar datos, mientras que POST se utiliza para enviar datos (y devolver una respuesta). Los datos se pueden enviar con GET, pero POST es casi siempre la mejor opción, especialmente para los datos de formularios. Es posible que haya visto solicitudes GET antes, envían los datos adjuntos a la URL:

somewebsite.com/index.html?name=Joe

El signo de interrogación le dice al navegador que cualquier dato que se encuentre inmediatamente después no debe usarse para atravesar el sitio web, sino que se debe pasar a la página para que se procese. Esto funciona bien para cosas simples como un número de página, pero tiene algunos inconvenientes:

Límite máximo de caracteres: Hay un número máximo de caracteres que se pueden enviar en una url. Es posible que no tenga suficiente si está intentando enviar una gran cantidad de datos.
Visibilidad: Cualquiera puede ver los datos que se envían en una solicitud GET; no sirve para datos confidenciales como contraseñas o datos de formularios..

Las solicitudes POST funcionan de manera similar, solo que no envían los datos en la URL. Esto significa que se puede enviar una mayor cantidad de datos (los datos se conocen como carga útil), y se obtiene cierta seguridad al no exponer los datos. Sin embargo, aún se puede acceder fácilmente a los datos, así que busque en un certificado SSL ¿Qué es un certificado SSL y necesita uno? ¿Qué es un certificado SSL y lo necesita? Navegar por Internet puede ser aterrador cuando se trata de información personal. Lee más si quieres tranquilidad total..

Si se utiliza POST o GET, los datos se envían en llave -> valor pares En la URL anterior, la clave es nombre, y el valor es Joe.

La mejor manera de enviar formularios es usar JavaScript asíncrono y XML (AJAX). JavaScript admite llamadas AJAX, pero su uso puede resultar confuso. JQuery implementa estos mismos métodos exactos, pero lo hace de una manera fácil de usar. Puede indicarle a su navegador que realice una solicitud GET o POST: apéguese a POST para este ejemplo, pero las solicitudes GET se realizan de una manera similar.

Aquí está la sintaxis:

$ .post ('some / url', $ ('# myForm'). serialize ());

Este código hace varias cosas. La primera parte (PS) le permite a su navegador saber que desea usar jQuery para esta tarea. La segunda parte llama al enviar Método de jQuery. Tienes que pasar en dos parámetros; La primera es la url para enviar los datos, mientras que la segunda es la información. Puede encontrar (dependiendo de la URL a la que intenta acceder), que sus navegadores mismo origen La política de seguridad puede interferir aquí. Puede habilitar el uso compartido de recursos de origen cruzado para sortear esto, pero simplemente basta con señalar una URL alojada en el mismo dominio que su página..

El segundo parámetro llama a la jQuery. publicar por fascículos Método en su formulario. Este método accede a todos los datos de su formulario y los prepara para la transmisión; los serializa.

Este código solo es suficiente para enviar un formulario, pero es posible que las cosas actúen un poco extraño. Vale la pena investigar las herramientas de desarrollo de su navegador, ya que facilitan la tarea de depuración de las solicitudes de red..

Alternativamente, Postman es una excelente herramienta gratuita para probar solicitudes HTTP.

Si desea enviar su formulario utilizando AJAX cuando se presiona el botón enviar, es igual de fácil. Necesitas adjuntar tu código a la enviar Evento del formulario. Aquí está el código:

$ (document) .on ('submit', '# myForm', function () $ .post ('some / url', $ ('# myForm'). serialize ()); return false;);

Este código hace varias cosas. Cuando se envía su formulario, su navegador viene y ejecuta su código primero. Su código luego envía los datos del formulario utilizando AJAX. El último paso requerido es evitar que se envíe el formulario original; ya lo ha hecho con AJAX, por lo que no desea que vuelva a suceder.!

Si desea realizar alguna otra tarea una vez que el AJAX haya finalizado (o quizás incluso devuelva un mensaje de estado), debe usar un llamar de vuelta. JQuery hace que sean muy fáciles de usar, simplemente pase una función como otro parámetro como este:

$ .post ('url', $ ('# myForm'). serialize (), función (resultado) console.log (resultado);

los resultado argumento contiene los datos devueltos por la url a la que se enviaron los datos. Puede responder fácilmente a estos datos:

if (result == 'success') // realiza alguna tarea else // realiza otra tarea 

Eso es todo por este post. Esperemos que ahora tenga una comprensión sólida de las solicitudes HTTP, y cómo funciona AJAX en el contexto de un formulario.

¿Aprendiste algún truco nuevo hoy? ¿Cómo usas AJAX con formularios? Háganos saber sus pensamientos en los comentarios a continuación.!

Créditos de la imagen: vectorfusionart / Shutterstock

Explorar más sobre: ​​JavaScript, jQuery, Desarrollo Web.