Funcionamiento basico - Ajax Sin Ajax, Facil y muy util ♛ Top Hosting

Visto 21872 veces

Para lograr validar formularios y otras operaciones sin recargar la pagina sera necesario. (Por el momento los ejemplos seran utilizando formulario.)

Incluir un iframe con id. Mientras estemos en modo desarrollo puede ser grande ya que nos servira para depurar el codigo php. Luego bastara con css añadirle un estilo display:none.
Incluir un formulario y agregar target="id_iframe"

Listo! Ya estas ejecutando codigo PHP y consultas MySQL sin recargar la pagina. Mas adelante estara explicado como enviar mensajes y datos a la pagina principal.

Ej. teorico para formulario de registro en un sitio web.

El usuario completa el formulario con nombre, email, sitios web, etc, etc. Pero el email ya esta registrado. Al enviar el formulario se ejecutara validar.php dentro del iframe sin recargar la pagina. Validar.php encontrara que el email ya existe y mostrara un mensaje al usuario indicando que utilice otro email. El usuario modificara el email y nuevamente realizara click en registrarme. Todo esto sin recargar ni cambiar de pagina.

Antiguamente se guardaban los datos en sesiones y luego de recargar la pagina se completaban mediante programacion. Es el caso cuando en algunos sitios web luego que nos informa de algun error se vacian algunos campos que ya habiamos completado.

Desde el iframe tambien podras validar si el capcha es correcto.

Otro ejemplo seria incluir un select con categorias, luego en el lugar de las subcategorias deberias incluir un iframe. Cada vez que se cambie la categoria cambiaran las subcategorias. Esto es muy simple y mas adelante esta el detalle y codigo. Tener en cuenta que al quitarle los bordes al iframe quedara totalmente invisible para el usuario.

Sin recargar pagina

<!doctype html> <html> <head> <meta charset="utf-8> <title>Sin recargar pagina</title> </head><body> <form method="post" action="validar.php" target="iframe"> <nput type="text" value="" name="nombre"; id="nombre" /> <input type="text" value="" name="email" id="email" /> <input type="submit" /> </form> <iframe name="iframe" id="iframe" frameborder="0"></iframe> </body> </html>

Visitar articulo completo sobre Ajax Sin Ajax, Facil y muy util