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:
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.
holaa muy bonito tutorial, tengo una pregunta,, si quisiera cargar en un select de html el codigo de cada persona y mandarle eso como parametro a la consulta,para que en la tabla me muestre los datos de solo esa persona que elegi con el select de html, es posible?
Hola buenos días, totalmente posible, el combobox HTML lo puedes llenar con JavaScript similar a como lleno la tabla, así mismo en el código JavaScript para hacer la consulta solo necesitas pasar el valor a tu archivo php en el método send(), así:
ajax.send(«varp2=»+valor)
Quedandote el código más o menos así:
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject(«Msxml2.XMLHTTP»);
} catch (e) {
try {
xmlhttp = new ActiveXObject(«Microsoft.XMLHTTP»);
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function Enviar () {
valor = document.getElementById(‘valor’).value;
ajax = objetoAjax();
ajax.open(«POST», «pagina2.php», true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
document.getElementById(«resultado»).innerHTML=ajax.responseText;
}
}
ajax.setRequestHeader(«Content-Type»,»application/x-www-form-urlencoded»);
ajax.send(«varp2=»+valor)
}
Si te das cuenta estoy haciendo uso del método POST ya es tu desicón si lo usas o te va mejor con el método GET, en el archivo php recibes el valor así:
En el cual harías tu consulta.
Saludos.
Una pregunta. ¿Existe alguna manera de que «no» se presenten los corchetes «[» al inicio y final del Arreglo JSON?
Es decir el método que usas presenta los datos de la siguiente manera.
[ {«campo1»:valor, «campo2»:valor2} ]
¿Hay manera de que el resultado no «traiga» los corchetes de inicio y fin dejándolo así?
{ «campo1»:valor, «campo2»:valor2 }
Es decir, seguir usando PDO pero sin que traiga los corchetes, ya que si no, creo que funciona mejor la forma clásica de consultas select.
Saludos.
Hola Muy buenas,
Soy muy novato en esto y descubrí tu pagina a través de youtube, con el video «Buscador en PHP – PDO (Conexión PHP – MYSQL)», el cual estoy tratando de hacer funcionar, pero estoy teniendo problemas. El articulo en cuestión no lo localizo en tu web. Necesitaría el código, para compararlo con el mío, por que no consigo que deje de salirme el mensaje «El articulo no existe en la base de datos» (articulo lo puse yo para ajustarlo a mi pagina). Por mas que miro en el video comparo y modifico, no consigo que me de ningún resultado que no sea ese. Seguro que sera una tontería, pero es que no doy con el error.
Ademas me gustaría saber si ahi alguna manera de implementarle un auto complete, para que no sea necesario poner el nombre del articulo completo, porque seria imposible de recordar la lista completa tal y como lo pone en la BD son muchos artículos distintos…
Espero me pueda ayudar,
Un saludo y gracias de antemano
Hola, gracias por comentar. aquí dejo e repositorio de este ejemplo, que básicamente es el mismo:
https://github.com/Byspel/Busqueda-b-sica-desde-Php-a-Mysql
Saludos!
Buen día,
Buen tutorial, me a funcionado el codigo muy bien sólo que necesito que se muestren los datos según lo ingresado en un input text. ¿Como hago para pasar este valor a mi php y lo pueda insertar en mi sentencia SELECT FROM WHERE?