Cómo usar AJAX para enviar un formulario web

Anuncio

Puede que hayas leído nuestro guía jQuery Una guía básica de JQuery para programadores de JavascriptSi eres un programador de Javascript, esta guía de JQuery te ayudará a comenzar a codificar como un ninja. Lee mas , así como la quinta parte de nuestro Tutorial de jQuery sobre AJAX Tutorial de jQuery (Parte 5): ¡AJAX a todos!A medida que nos acercamos al final de nuestra serie de mini-tutoriales jQuery, es hora de que analicemos en profundidad una de las características más utilizadas de jQuery. AJAX permite que un sitio web se comunique con ... Lee mas , 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 revisa nuestro tutorial de inicio Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa 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 algo de código y aprendamos cómo ... Lee mas si eres un principiante Saltemos a la derecha.

Por qué usar AJAX

Quizás se pregunte "¿Por qué necesito AJAX?" HTML es perfectamente capaz de enviar formularios, y lo hace de una manera bastante indolora. AJAX se implementa en una gran mayoría de páginas web, y su popularidad continúa aumentando.

El gran beneficio que trae AJAX es la capacidad de carga parcial partes de páginas web. Esto hace que las páginas parezcan más rápidas y más receptivas, y ahorra ancho de banda al tener que volver a cargar una pequeña porción de datos en lugar de toda la página. Estos son algunos casos de uso básicos de AJAX:

• Verifique los nuevos correos electrónicos regularmente.
• Actualice un puntaje de fútbol en vivo cada 30 segundos.
• Actualice 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 agradecerán.

El HTML

Antes de comenzar, necesita un formulario HTML. Si no sabe qué es HTML, lea nuestra guía sobre como hacer un sitio web para principiantes Cómo hacer un sitio web: para principiantesHoy te guiaré a través del proceso de hacer 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 necesita:

 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 usa AJAX, pero es una buena idea usarlos, ya que garantiza que los visitantes de su sitio web puedan seguir usándolo si tienen JavaScript deshabilitado. Esta página incluye jQuery alojado por Google en su CDN Qué son las CDN y por qué el almacenamiento ya no es un problemaLos CDN hacen que Internet sea rápido y que los sitios web sean asequibles, incluso cuando escalas a millones de usuarios. En primer lugar, el ancho de banda cuesta dinero; aquellos de nosotros con contratos limitados lo sabemos muy bien. No solo tú ... Lee mas . los cabeza contiene una guión etiqueta: aquí es donde escribirás tu código.

Este formulario puede parecer un poco aburrido en este momento, por lo que es posible que desee considerar aprender CSS 5 pasos de bebé para aprender CSS y convertirse en un hechicero CSS increíbleCSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Lee mas para animarlo un poco.

El JavaScript

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

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

Por supuesto, puede orientar el formulario con jQuery si lo prefiere; no hay diferencia:

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

Este comando le dice a su navegador que envíe el formulario, exactamente como presionar el botón Enviar. Apunta al formulario por su ID, y en este caso, eso es myForm. Esto no es AJAX, por lo que volverá a cargar 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 al enviar formularios con AJAX, pero se puede usar el mismo método.

Gran parte de la web moderna se ejecuta a partir de solicitudes GET o POST. En términos generales, GET se usa para recuperar datos, mientras que POST se usa 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 formulario. Es posible que haya visto solicitudes GET antes: envían los datos adjuntos a la URL:

somewebsite.com/index.html? nombre = Joe

El signo de interrogación le dice al navegador que cualquier dato inmediatamente siguiente no debe usarse para recorrer el sitio web, sino que 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 es bueno 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, todavía se puede acceder fácilmente a los datos, así que busque en un Certificado SSL ¿Qué es un certificado SSL y necesita uno?Navegar por Internet puede dar miedo cuando se trata de información personal. Lee mas si quieres total tranquilidad.

Si se utiliza POST o GET, los datos se envían 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 ser 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; manténgase en POST para este ejemplo, pero las solicitudes GET se realizan de manera similar.

Aquí está la sintaxis:

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

Este código hace varias cosas. La primera parte ($) 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 dos parámetros; La primera es la url a la que se envían los datos, mientras que la segunda son los datos. Puede encontrar (dependiendo de la URL a la que está intentando acceder) que sus navegadores mismo origen La política de seguridad puede interferir aquí. Puedes habilitar intercambio de recursos de origen cruzado para evitar esto, pero simplemente apuntando a una URL alojada en el mismo dominio que su página a menudo es suficiente.

El segundo parámetro llama a 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 hacen que la depuración de las solicitudes de red sea muy sencilla.

Alternativamente, Cartero 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. Necesita adjuntar su código a la enviar evento de la forma. Aquí está el código:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); falso retorno; });

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, ¡así que no desea que vuelva a suceder!

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

$ .post ('url', $ ('# myForm'). serialize (), function (result) {console.log (result); }

los resultado El argumento contiene todos 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 {// hacer alguna otra tarea. }

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

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

Créditos de imagen: vectorfusionart / Shutterstock