¿Quieres mejorar la experiencia de los usuarios en tu sitio web? ¡Entonces necesitas conocer sobre AJAX y PHP con SQL! En este artículo te mostraremos cómo combinar estas tecnologías para lograr que tu página sea más dinámica y eficiente, permitiendo que tus usuarios disfruten de una navegación más fluida y rápida. ¡No te pierdas esta guía para implementar AJAX y PHP con SQL en tus proyectos web!
En este artículo, vamos a ver cómo implementar un Ajax solución que utiliza un PHP página para extraer datos de una base de datos back-end. En este tutorial, tenemos una tabla almacenada en un base de datos mysql.
Puedes reemplazar el codigo PHP en esta página con cualquier otro lenguaje de secuencias de comandos del lado del servidor con el que esté familiarizado, como ÁSPID o ASP.NET. Además, la fuente de datos de back-end no es tiene que ser MySQL.
Puedes modificar el conexión de base de datos en el ejemplo para acceder a otras plataformas de bases de datos. El concepto sigue siendo el mismo.
Ejemplo HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function showEmployee(str) {
if (str==""){
document.getElementById("div1").innerHTML="Select an Employee for more details!";
return;
}
var xhr = false;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else {
// IE5/IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div1").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "/demo/ajax_dbquery.php?q="+str, true);
xhr.send(null);
}
}
</script>
</head>
<body>
<div>
<select name="employees" onchange="showEmployee(this.value)">
<option value="">Select an Employee:</option>
<option value="3">Frank Ford</option>
<option value="1">John Smith</option>
<option value="4">Lisa Stark</option>
<option value="2">Sally Smart</option>
</select>
<div id="div1">Select an Employee for more details!</div>
</div>
</body>
</html>Ejemplo PHP
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax and PHP</title>
</head>
<body>
<table>
<?php
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: Sat, 14 Jan 2012 01:00:00 GMT");
$hostname="dbserver.com";
$username="dbUserName";
$password="dbPassword";
$dbname="databaseName";
$usertable="employees";
$field1 = "empName";
$field2 = "empTitle";
$field3 = "empOffice";
$conn = mysql_connect($hostname,$username, $password);
if (!$conn) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($dbname);
$query = "SELECT * FROM $usertable WHERE empID = '" .$_GET['q']."'";
$result = mysql_query($query);
if($result){
while($row = mysql_fetch_array($result)){
echo "<tr><td style="width:100px;">Name:</td><td>".$row["$field1"]."</td></tr>";
echo "<tr><td style="width:100px;">Title:</td><td>".$row["$field2"]."</td></tr>";
echo "<tr><td style="width:100px;">Office:</td><td>".$row["$field3"]."</td></tr>";
}
}
mysql_close($conn);
?>
</table>
</body>
</html>Utilizamos una página web HTML frontal que carga datos desde un Página PHP (.php) a través de Ajax. Cuando un usuario selecciona un elemento en la lista desplegable, la selección se envía a la página de PHP usando Ajax y la página de recepción usa la información pasada en la cadena de consulta.
el valor de la parámetro de cadena de consulta se envía a la base de datos y los resultados se envían de vuelta a la página HTML en el XmlHttpResponse.responseText propiedad.
