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

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.

 

 

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

Deja un comentario

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