Enviar formulario sin actualización de la página - PHP/jQuery

Al enviar un formulario, los usuarios esperan una experiencia de usuario perfecta. Incluso la interrupción más pequeña en la experiencia de navegación puede conducir a una caída en la tasa de conversión. Suponga que su sitio web tiene múltiples formularios pequeños que requieren que los usuarios ingresen datos personales, direcciones y otra información confidencial. En ese caso, debe considerar la implementación de la validación de Ajax y las características de autosave para reducir el riesgo de que los usuarios pierdan sus datos.

Esta publicación de blog le enseñará cómo crear un formulario Ajax sin actualizar la página con PHP y JQuery. También podrá implementar funciones de autosave para los visitantes de su sitio web y ver ejemplos de cómo se pueden implementar las mejores prácticas en escenarios de la vida real. Empecemos!

1. Página web principal

Crear y índice.html Archivo en su sitio web utilizando el siguiente contenido. Este es el formulario HTML principal que se mostrará en la página del sitio web. Simplemente puede integrar un formulario en cualquier página del sitio web.

 Enviar formulario sin actualización de la página - PHP/jQuery - Tecadmin.Nombre neto: 
 Correo electrónico: 
 Telefono no:
 Género Masculino Femenino
   
 Sus datos se mostrarán a continuación .. 
 ===============================
      

2. Crear javascript

Ahora crea una página de JavaScript con nombre entregar.js adentro js Directorio utilizando el siguiente contenido. Puede optimizar este JavaScript agregando las validaciones de jQuery.

función SubtFormData () var name = $ ("#name").val (); VAR Correo electrónico = $ ("#correo electrónico").val (); VAR Teléfono = $ ("#Teléfono").val (); var gender = $ ("input [type = radio]: marcado").val (); ps.Publicar ("Enviar.php ", nombre: nombre, correo electrónico: correo electrónico, teléfono: teléfono, género: género, función (data) $ ('#resultados').html (datos); $ ('#myform') [0].reiniciar(); );  

3. Crear script php

Ahora cree un script PHP llamado entregar.php. Este script hará todas sus operaciones respaldadas. Cuando enviemos el formulario web, este script obtendrá todos los argumentos de la publicación. Puede personalizar este script de acuerdo con su requisito, como guardar valores en la base de datos, registros de correo electrónico al administrador, etc.

"; echo $ _post ['correo electrónico'] ."
"; echo $ _post ['teléfono'] ."
"; echo $ _post ['género'] ."
"; echo" ==============================
"; echo" Todos los datos presentados con éxito!"; ?> 

4. Pruebas

Ahora acceso índice.html página en el navegador web y prueba este ejemplo. También puedes ver esta demostración.

Conclusión

Los formularios AJAX son una parte esencial del desarrollo moderno de aplicaciones web y se pueden utilizar para mejorar la experiencia del usuario mediante la disminución del tiempo requerido para enviar datos. La tecnología detrás de las formas AJAX ha progresado mucho en los últimos años, especialmente con el advenimiento de marcos JavaScript más potentes que proporcionan funcionalidad adicional y facilidad de uso. Es importante tener en cuenta que los beneficios de usar un formulario AJAX no se limitan a los sitios web. De hecho, los mismos conceptos se pueden aplicar para crear una aplicación móvil con una interfaz de usuario receptiva. Es por eso que es importante comprender los conceptos básicos de crear una forma AJAX y las ventajas que vienen con ella.