Modificació de l’AJAX per passar més paràmetres Afegirem bd
i taula
als dades enviades a PHP.
$(document).ready(function () {
// Quan el DOM estigui completament carregat, s'executa aquesta funció.
$("#cercar").on("keyup", function () {
// Associem un esdeveniment 'keyup' al camp de text amb ID 'cercar'.
var paraula = $(this).val(); // Obtenim el valor actual del camp de text.
var bd = "nom_de_la_base_de_dades"; // Nom de la base de dades (pot ser dinàmic).
var taula = "nom_de_la_taula"; // Nom de la taula (pot ser dinàmic).
console.log("Tecla premuda: " + paraula); // Mostrem el valor a la consola per depuració.
if (paraula.length > 0) {
// Si hi ha text al camp de cerca (longitud major que 0), fem una crida AJAX.
$.ajax({
url: "cercar.php", // URL del script del servidor que processarà la sol·licitud.
type: "POST", // Mètode HTTP utilitzat per enviar les dades.
data: {
cercar: paraula, // Paraula buscada.
bd: bd, // Nom de la base de dades.
taula: taula // Nom de la taula.
},
success: function (resposta) {
// Funció que s'executa si la crida AJAX té èxit.
console.log("Resposta AJAX rebuda"); // Missatge de depuració.
var resultats = JSON.parse(resposta); // Convertim la resposta JSON a un array JavaScript.
var htmlResultats = resultats.map(function (item) {
// Creem elements HTML (<li>) per a cada resultat.
return "<li class='resultat'>" + item + "</li>";
}).join(""); // Unim els elements en una cadena HTML.
$("#resultats_autocompletar").html(htmlResultats); // Inserim els resultats al contenidor.
},
error: function () {
// Funció que s'executa si hi ha un error en la crida AJAX.
console.error("Error en la crida AJAX."); // Missatge d'error a la consola.
}
});
} else {
// Si el camp de cerca està buit, esborrem els resultats previs.
$("#resultats_autocompletar").html("");
}
});
// Afegim un esdeveniment de clic per als elements de la llista de resultats.
$(document).on("click", ".resultat", function () {
var paraulaSeleccionada = $(this).text(); // Obtenim el text de l'element clicat.
console.log("Paraula seleccionada: " + paraulaSeleccionada); // Mostrem el text a la consola.
$("#cercar").val(paraulaSeleccionada); // Col·loquem el text seleccionat al camp de cerca.
});
});
cercar.php
<?php
header('Content-Type: application/json'); // Indiquem que la resposta serà en format JSON.
session_start(); // Iniciem la sessió (si és necessari per altres funcions).
if (isset($_POST['cercar'], $_POST['bd'], $_POST['taula'])) {
// Comprovem que s'hagin rebut tots els paràmetres necessaris.
$cercar = $_POST['cercar']; // Text introduït per l'usuari.
$bd = $_POST['bd']; // Nom de la base de dades.
$taula = $_POST['taula']; // Nom de la taula.
// Conexió a la base de dades (ajusta les credencials segons el teu entorn).
$conn = new mysqli("localhost", "usuari", "contrasenya", $bd);
if ($conn->connect_error) {
// Si hi ha un error de connexió, retornem un missatge d'error en format JSON.
die(json_encode(["error" => "Error de connexió: " . $conn->connect_error]));
}
// Evitem injeccions SQL utilitzant prepared statements.
$stmt = $conn->prepare("SELECT camp FROM $taula WHERE camp LIKE ?"); // Consulta SQL.
$cercar = "%$cercar%"; // Cerca parcial (exemple: '%text%').
$stmt->bind_param("s", $cercar); // Lliguem el paràmetre de cerca.
$stmt->execute(); // Executem la consulta.
$result = $stmt->get_result(); // Obtenim el resultat.
$resultats = []; // Array per emmagatzemar els resultats.
while ($row = $result->fetch_assoc()) {
// Recorrem els resultats i afegim cada valor al array.
$resultats[] = $row['camp'];
}
echo json_encode($resultats); // Retornem els resultats en format JSON.
$stmt->close(); // Tanquem la sentència preparada.
$conn->close(); // Tanquem la connexió a la base de dades.
} else {
// Si falten paràmetres, retornem un missatge d'error en format JSON.
echo json_encode(["error" => "Falten paràmetres"]);
}
?>
Què hem fet?
- Passar
$cercar
, $bd
i $taula
des d’AJAX a cercar.php
.
- Utilitzar
$bd
i $taula
a la consulta SQL perquè la cerca sigui més flexible.
- Afegir seguretat amb
mysqli_prepare
per evitar SQL Injection.
- Enviar la resposta com JSON, que AJAX pot interpretar fàcilment.