En este blog vamos a aprender a ingresar y obtener información de una base de datos usando Ajax.
Creamos una carpeta en el servidor en la cual alojaremos las páginas con las que vamos a trabajar, luego creamos la página principal llamada index.html, en ésta crearemos un formulario para ingresar los datos a la base de datos, y también un botón para desplegarlos.
Se crean archivos .php para abrir y cerrar la conexión a la base de datos.
Para abrir la conexión.
Nombre de archivo: Conexion.php
Para cerrar la conexión.
Nombre de archivo: cerrarConexion.php
Se crea un archivo .js para enviar la información del usuario a la base de datos, y en él incluimos la función que enviará los datos con ajax.
Se le asigna un evento al formulario el cual ejecuta el método preventDefault() que evita que éste se redireccione cuando envíe los datos (Linea 18).
Se crea el archivo que recibirá los datos enviados por ajax para ser agregados en la base de datos.
Nombre de archivo: setUsuario.php
Se crea el archivo que organiza la información para ser desplegada en una tabla.
Nombre de archivo: getUsuario.php
Para obtener la información de la base de datos creamos una función en el mismo archivo .js que obtendrá la información con ajax.
En la página index.html se agregan algunos estilos, las librerías para tener acceso a ajax y jquery, también el acceso al archivo .js donde están las funciones ajax setUsuario y usuario que se han creado (Lineas 5-7):
Se llama la función setUsuario que envía los datos a la base de datos (Linea 13).
Se agrega el evento onclick al botón pasandole como parámetro la función usuarios que muestra los usuarios (linea 22) .
Ingresando los datos de usuarios (nombre,apellido,teléfono,email) a la base de datos.
Otro usuario
y por ultimo se verifica que los datos fueron ingresados correctamente en la base de datos.
Mostrando los datos a través del botón Mostrar usuarios
No hay comentarios.:
Publicar un comentario
¿Tienes alguna pregunta?