Consultar Datos desde Php en Mysql Utilizando AJAX y JSON

JavaScript

En un artículo anterior hablamos de cómo podemos utilizar JSON de forma simple, con el fin de realizar intercambio de datos dentro de nuestras aplicaciones haciendo uso de JavaScript, vimos también cómo podemos convertir estos datos en objetos JavaScript con el fin de manipular los datos con las funciones nativas que estén lenguaje ya tiene incorporadas.

PHP MySQL Utilizando AJAX JSON

En este artículo veremos cómo podemos llenar una tabla HTML con información de una base de datos MYSQL, realizando la consulta con PHP lanzando como resultado una cadena en JSON y nos valdremos del uso de AJAX para cargar los datos de forma asíncrona en el navegador sin la necesidad de recargar toda la página al momento de hacer la consulta veamos:

Primero que todo necesitamos nuestra base de datos con la tabla que tendrá la información:

La base de datos utilizada en este artículo se llama «test«

Código SQL para crear nuestra tabla:

CREATE TABLE `test`.`personas`( `id` INT(10), 
`nombres` VARCHAR(30),
`apellidos` VARCHAR(30), 
`email` VARCHAR(30), 
`direccion` TEXT, 
`telefono` VARCHAR(30), 
PRIMARY KEY (`id`) );

Insertando algunos registros de ejemplo:

INSERT INTO `test`.`personas` (`nombres`, `apellidos`, `email`, `direccion`, `telefono`) VALUES ('KARL', 'MARX', 'KARL@GMAIL.COM', 'CALLE 23', '3103331166'); 
INSERT INTO `test`.`personas` (`nombres`, `apellidos`, `email`, `direccion`, `telefono`) VALUES ('BILL', 'GATES', 'BILL@MICROSOFT.COM', 'CALLE 56', '345444'); 
INSERT INTO `test`.`personas` (`nombres`, `apellidos`, `email`, `direccion`, `telefono`) VALUES ('LOLA', 'LIZ', 'LOL@YAHOO.ES', 'CALLE FALSA 123', '667788');

Muy bien ya contando con la información en nuestra base de datos procedemos a crear el archivo de conexión en PHP:

Conexion.php

<?php 
function Conectar (){
 $conexion = null;
 $host = '127.0.0.1';
 $db = 'test';
 $user = 'root';
 $pwd = '';
 try {
 $conexion = new PDO('mysql:host='.$host.';dbname='.$db, $user, $pwd);
 }
 catch (PDOException $e) {
 echo '<p>No se puede conectar a la base de datos !!</p>';
 exit;
 }
 return $conexion;
}
?>

Seguido procedemos a crear el archivo PHP que realizará la consulta en la base de datos utilizando PDO y nos arrojará la información en JSON, para ello utilizaremos la función de PHP para convertir una cadena en JSON: json_encode()

Consulta.php

<?php 
require('conexion.php');
$con = Conectar();
$SQL = 'SELECT id, nombres, apellidos, email, direccion, telefono FROM personas';
$stmt = $con->prepare($SQL);
$result = $stmt->execute();
$rows = $stmt->fetchAll(\PDO::FETCH_OBJ);
echo(json_encode($rows));
?>

Ahora si nos dirigimos en nuestro navegador al archivo consulta.php tendremos:

JSON PHP

Nuestra consulta devolviendo los valores en JSON.

 Cargando los datos en JSON en una página HTML

Para mostrar los datos en la página utilizaremos un botón que desencadenará la acción, por ende al hacer clic sobre el mostramos la información de forma asíncrona:

Código index.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PHP + AJAX + MYSQL + JSON + PDO</title>
</head>
<body>
<h1>Personas</h1>
<div id="resultado"></div>
<button onclick="Cargar();">Mostrar Datos</button>
</body>
<script>
function Cargar() {
var xmlhttp = new XMLHttpRequest();
var url = "consulta.php";
xmlhttp.onreadystatechange=function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var array = JSON.parse(xmlhttp.responseText);
 var i;
 var out = "<table border='1'>";
 for(i = 0; i < array.length; i++) {
 out+=" <tr><td>"+
 array[i].id +
 "</td><td>"+
 array[i].nombres +
 "</td><td>" +
 array[i].apellidos+
 "</td><td>"+
 array[i].email+
 "</td><td>" +
 array[i].direccion +
 "</td><td>" +
 array[i].telefono +
 "</td></tr>";
 }
 out += "</table>";
 document.getElementById("resultado").innerHTML = out;
 }
}
xmlhttp.open("GET", url, true);
xmlhttp.send(); 
}
</script>
</html>

Al abrir nuestro archivo index.html y pulsar el botón Mostrar datos cargaríamos de forma asíncrona los datos contenidos en la tabla Mysql en HTML.

Tabla html json javascript