Ejemplo de uso PHP + AJAX
Este es un ejemplo básico de utilización de AJAX y PHP. Tendremos un campo input text en el cual teclearemos, y al mismo tiempo nos irá mostrando resultados que coincidan con nuestra búsqueda.
En nuestro caso, leeremos de un array de nombres de personas almacenados con PHP, pero sería muy sencillo adaptarlo a una búsqueda en la base de datos.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo AJAX PHP</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function filtra(str) {
if (str.length == 0) {
document.getElementById("resultado").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("resultado").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "datos.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div class="container">
<header class="text-center">
<h1>Ejemplo AJAX con PHP</h1>
<hr/>
<p class="lead">Autocompletado de un campo</p>
</header>
<div class="col-lg-6" style="margin-bottom:50px;">
<form class="form">
Buscar por nombre: <input type="text" onkeyup="filtra(this.value)">
</form>
<br/>
<br/>
<b>Resultados</b>
<br/>
<br/>
<span id="resultado"></span>
</div>
<footer class="col-lg-12 text-center">
Adaweb - 2017
</footer>
</div>
</body>
</html>
datos.php
<?php
// Array with names
$a[1] = "Ana";
$a[2] = "Belén";
$a[3] = "Carmen";
$a[4] = "Daniel";
$a[5] = "Eva";
$a[6] = "Francisco";
$a[7] = "Germán";
$a[8] = "Hugo";
$a[9] = "Iván";
$a[10] = "Juán";
$a[11] = "Kitty";
$a[12] = "Luis";
$a[13] = "Nadia";
$a[14] = "Ontario";
$a[15] = "Pepe";
$a[16] = "Jaime";
$a[17] = "Jacinto";
$a[18] = "José";
// Parámetro para buscar
$q = $_REQUEST["q"];
$resultado = "";
// Comprobación
if ($q !== "") {
$q = strtolower($q);
$tam=strlen($q);
foreach($a as $nombre) {
if (stristr($q, substr($nombre, 0, $tam))) {
if ($resultado === "") {
$resultado = "<p>".$nombre."<p>";
} else {
$resultado .= "<p>".$nombre."<p>";
}
}
}
}
// Mensaje si no hay resultados
echo $resultado === "" ? "no existen coincidencias " : $resultado;
?>
Este sistema sería válido, por ejemplo, para autocompletar búsquedas. Una de las principales ventajas es que la búsqueda se realiza sin tener que recargar la página.
En qué parte el código del código php se indica cuál va a ser el texto que se va a enviar a JavaScript?. Por qué aquí se utiliza el echo: // Mensaje si no hay resultados
echo $resultado === «» ? «no existen coincidencias » : $resultado;
?>
pero cuando se encuentra un resultado cómo se le dice a php el texto a enviar como respuesta?
YA ME DI CUENTA xD