PHP- AJAX y MySQL
AJAX se puede utilizar para la comunicación interactiva con una base de datos.
Ejemplo de base de datos AJAX
El siguiente ejemplo demostrará cómo una página web puede obtener información de una base de datos con AJAX:
Ejemplo
Ejemplo explicado: la base de datos MySQL
La tabla de la base de datos que usamos en el ejemplo anterior se ve así:
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Peter | Griffin | 41 | Quahog | Brewery |
| 2 | Lois | Griffin | 40 | Newport | Piano Teacher |
| 3 | Joseph | Swanson | 39 | Quahog | Police Officer |
| 4 | Glenn | Quagmire | 41 | Quahog | Pilot |
Ejemplo explicado
En el ejemplo anterior, cuando un usuario selecciona una persona en la lista desplegable anterior, se ejecuta una función llamada "showUser()".
La función es desencadenada por el evento onchange.
Aquí está el código HTML:
Ejemplo
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Explicación del código:
Primero, verifique si la persona está seleccionada. Si no se selecciona ninguna persona (str == ""), borre el contenido de txtHint y salga de la función. Si se selecciona una persona, haga lo siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función que se ejecutará cuando la respuesta del servidor esté lista
- Enviar la solicitud a un archivo en el servidor
- Observe que se agrega un parámetro (q) a la URL (con el contenido de la lista desplegable)
El archivo PHP
La página en el servidor llamado por el JavaScript anterior es un archivo PHP llamado "getuser.php".
El código fuente en "getuser.php" ejecuta una consulta en una base de datos MySQL y devuelve el resultado en una tabla HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>Explicación: cuando la consulta se envía desde JavaScript al archivo PHP, ocurre lo siguiente:
- PHP abre una conexión a un servidor MySQL
- Se encuentra la persona correcta
- Se crea una tabla HTML, se llena con datos y se envía de vuelta al marcador de posición "txtHint".