Llenar input HTML con Ajax desde Php y MySQL DataBase

AJAX

En artículos anteriores, hemos visto la utilidad de Ajax en distintos escenarios. Pues bien, hoy recrearemos otro. Y ¡muy común!, mediante una consulta en al servidor MySQL desde Php, procederemos a llenar input HTML con Ajax, sin la necesidad de recargar toda la página, solo pulsando en un botón, sin más empecemos.

Cómo Llenar input HTML con Ajax desde Php y MySQL

Para este ejemplo, consideramos que necesitamos mostrar en inputs de html, valores que están alojados en una base de datos MySQL; en la que tenemos una tabla llamada «personas», con atributos: nombres, apellidos y teléfono.

1. Creamos el archivo PHP (consulta.php) que retornará los valores de la consulta

Llenar input HTML con Ajax

🛡 Los ataques informáticos crecen cada día
YouTube IconProtege tus Dispositivos - Usa Kaspersky Antivirus.

En el código anterior hacemos la conexión a MySQL con los datos del servidor, seguido de la consulta SQL que deseamos ejecutar; si observamos la respuesta que estamos devolviendo la formateamos a JSON.

Si probamos el archivo php en el navegador obtenemos:

Consulta SQL en PHP y MySQL

Estos valores serán los que recibiremos mediante AJAX, para cargarlos a los input HTML.

2. Creamos una página HTML donde mostraremos los datos

Llenar input HTML con Ajax php y mysql

De este código podemos resaltar el enlace que hemos definido para hacer uso de JQuery; esta librería nos servirá para manipular los valores del DOM.

Al probar el archivo HTML, observaremos que tiene el siguiente aspecto.

Ejemplo de formulario básico en HTML

3. Codificando las líneas de JavaScript y AJAX para obtener el resultado de la consulta

Procedemos a iniciar las etiquetas script, luego del body de la página HTML y codificamos:

Acceder a valores en MySQL desde JavaScript con AJAX

De esta manera hacemos uso del objeto XHLHttpRequest, que contiene los métodos y funciones para el manejo de Ajax y peticiones asíncronas, finalmente definimos que método utilizamos para ejecutar el script PHP, en este caso es POST.

4. Prueba del proyecto

Ahora al abrir la página HTML mediante el servidor Web, hacemos clic en el botón mostrar y recibimos los datos en los input HTML.

Llenar input HTML con Ajax

Finalmente logramos acceder a valores almacenados en MySQL sin necesidad de hacer una recarga del navegador, haciendo el proceso de consulta más simple al usuario; cabe mencionar que en este artículo se procuró hacer la consulta lo más simple posible, con la intención de que puedas ajustar este código a las necesidades de tu proyecto.

 

 

5 comentarios

  1. Luis Contestar

    Hola buenas tardes, entiendo que para usar un input que permita modificar datos existentes en la BD el metodo seria GET, y para modificar en la BD, luego de la edición del usuario habria que usar el metodo POST, es correcto ? Gracias

    • Ivan David Lopez Contestar

      Amigo, gracias por tu comentario, todo depente, puedes ajustar tu código según las necesidades, algunos programadores inclusive no usan GET para ninguna de las peticiones.
      Saludos!

  2. Thiago Contestar

    Hola! Muy bueno, te consulto, si tenes mas registros como vas mostrando los siguientes? Ya que vos pones por defecto la posicion 0 y con un for te recorreria todo.

    • Ivan David Lopez Contestar

      Amigo, claro, tienes razón, la explicación del artículo es para mostrar como se hace la consulta, sin recargar la página con un solo registro, por eso es que utilizamos en la consulta where id=’2′, con esto ya recuperas el registro en específico que necesitas.

      Si lo que quieres es traer más registros, efectivamente necesitas pasarlo a otro componente, ya sea una lista desplegable o una tabla (Estás en lo correcto, puedes usar un ciclo).

      Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *