Tutorial di base PHP

Tutorial avanzato PHP

PHP & MySQL

Manuale di riferimento PHP

PHP MySQL Ajax Ricerca in tempo reale

In questo tutorial, imparerai come creare una funzione di ricerca database MySQL in tempo reale utilizzando PHP e Ajax.

Ricerca database in tempo reale Ajax

Puoi creare una funzione di ricerca database in tempo reale semplice utilizzando Ajax e PHP, che mostrerà i risultati di ricerca quando inizierai a digitare alcuni caratteri nel campo di ricerca.

In questo tutorial, creeremo una casella di ricerca in tempo reale, che cercherà nella tabella countries e mostrerà i risultati in modo asincrono. Ma prima dobbiamo creare la tabella.

Passaggio 1: Creare la tabella del database

Esegui la seguente query SQL per creare la tabella countries nel database MySQL.

Esempio

CREATE TABLE countries (
　　　　id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
　　　　name VARCHAR(50) NOT NULL
);

Dopo aver creato la tabella, devi utilizzareEsempio di SQL INSERT statementInserire alcuni dati.

Se non sei familiare con i passaggi per creare una tabella, consultaEsempio di SQL CREATE TABLE statementIl tutorial per ottenere dettagli sulla sintassi della creazione di tabelle nel sistema di database MySQL.

Passo 2: Creare il modulo di ricerca

Ora, creiamo una semplice interfaccia web che permette agli utenti di cercare in tempo reale "countries"Tabella disponibilepaesi/regioniIl nome, come completamento automatico o input predefinito.

Creare un file PHP chiamato "search-form.php" e inserire il seguente codice al suo interno.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP MySQL Database Live Search</title>
<style type="text/css">
　　　　body {
　　　　　　　　font-family: Arail, sans-serif;
　　　　}
　　　　/* Definendo lo stile della casella di ricerca */
　　　　.search-box {
　　　　　　　　width: 300px;
　　　　　　　　position: relative;
　　　　　　　　display: inline-block;
　　　　　　　　font-size: 14px;
　　　　}
　　　　.search-box input[type="text"] {
　　　　　　　　height: 32px;
　　　　　　　　padding: 5px 10px;
　　　　　　　　border: 1px solid #CCCCCC;
　　　　　　　　font-size: 14px;
　　　　}
　　　　.result {
　　　　　　　　position: absolute;　　　　　　　　
　　　　　　　　z-index: 999;
　　　　　　　　top: 100%;
　　　　　　　　left: 0;
　　　　}
　　　　.search-box input[type="text"], .result {
　　　　　　　　width: 100%;
　　　　　　　　box-sizing: border-box;
　　　　}
　　　　/* Formattando gli elementi dei risultati */
　　　　.result p {
　　　　　　　　margin: 0;
　　　　　　　　padding: 7px 10px;
　　　　　　　　border: 1px solid #CCCCCC;
　　　　　　　　border-top: none;
　　　　　　　　cursor: pointer;
　　　　}
　　　　.result p:hover {
　　　　　　　　background: #f2f2f2;
　　　　}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
　　　　$('.search-box input[type="text"]').on("keyup input", function() {
　　　　　　　　/* Ottieni il valore dell'input quando si modifica */
　　　　　　　　var inputVal = $(this).val();
　　　　　　　　var resultDropdown = $(this).siblings(".result");
　　　　　　　　if(inputVal.length){
　　　　　　　　　　　　$.get("backend-search.php", {term: inputVal}).done(function(data){
　　　　　　　　　　　　　　　　//Visualizza i dati restituiti nel browser
　　　　　　　　　　　　　　　　resultDropdown.html(data);
　　　　　　　　　　　　});
　　　　　　　　} else {
　　　　　　　　　　　　resultDropdown.empty();
　　　　　　　　}
　　　　});
　　　　
　　　　//Imposta il valore dell'input di ricerca quando si clicca su un elemento di risultato
　　　　$(document).on("click", ".result p", function(){
　　　　　　　　$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
　　　　　　　　$(this).parent(".result").empty();
　　　　});
});
</script>
</head>
　　　　<div class="search-box">
　　　　　　　　<input type="text" autocomplete="off" placeholder="Cerca paese..." />
　　　　　　　　<div class="result"></div>
　　　　</div>
</html>

Ogni volta che si modifica il contenuto dell'input di ricerca o si verifica un evento di digitazione sull'input di ricerca, il codice jQuery invia una richiesta Ajax al file "backend-search.php", che ricevepaesi/regionirelativicountriesRicerca delle parole chiave nella tabella. Questi record saranno inseriti in seguito da jQuery<div>e visualizzato nel browser.

Passo 3: Elaborazione della ricerca in backend

Questo è il codice sorgente del nostro file "backend-search.php", che ricerca il database in base alla stringa di ricerca inviata tramite Ajax e invia i risultati al browser.

Esempio online: metodo procedurale

<?php
/* Prova a connettersi al server MySQL. Supponiamo che tu stia eseguendo MySQL
Server con impostazioni predefinite (utente "root", senza password) */
$link = mysqli_connect("localhost", "root", "", "demo");
　
// Controllare la connessione
if($link === false){
　　　　die("Errore: impossibile connettersi. " . mysqli_connect_error());
}
　
if(isset($_REQUEST["term"])){
　　　　// Query preparata select
　　　　$sql = "SELECT * FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = mysqli_prepare($link, $sql)){
　　　　　　　　// Legare le variabili come parametri alla query preparata
　　　　　　　　mysqli_stmt_bind_param($stmt, "s", $param_term);
　　　　　　　　
　　　　　　　　// Impostare i parametri
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　// Tentativo di eseguire la query preparata
　　　　　　　　if(mysqli_stmt_execute($stmt)){
　　　　　　　　　　　　$result = mysqli_stmt_get_result($stmt);
　　　　　　　　　　　　
　　　　　　　　　　　　// Controllare il numero di righe nella raccolta dei risultati
　　　　　　　　　　　　if(mysqli_num_rows($result) > 0){
　　　　　　　　　　　　　　　　// Ottenere le righe dei risultati come array associativo
　　　　　　　　　　　　　　　　while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo "<p>" . $_row["name"] . "</p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　echo "<p>Non sono stati trovati record corrispondenti</p>";
　　　　　　　　　　　　}
　　　　　　　　} else {
　　　　　　　　　　　　echo "Errore: impossibile eseguire $sql. " . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//Fine della dichiarazione
　　　　mysqli_stmt_close($stmt);
}
　
//Chiudi la connessione
mysqli_close($link);
?>

Esempio online: metodo orientato agli oggetti

<?php
/* Prova a connettersi al server MySQL. Supponiamo che tu stia eseguendo MySQL
Server con impostazioni predefinite (utente "root", senza password) */
$mysqli = new mysqli("localhost", "root", "", "demo");
　
// Controllare la connessione
if($mysqli === false){
　　　　die("Errore: impossibile connettersi. " . $mysqli->connect_error);
}
　
if(isset($_REQUEST["term"])){
　　　　// Query preparata select
　　　　$sql = "SELECT * FROM countries WHERE name LIKE ?";
　　　　
　　　　if($stmt = $mysqli->prepare($sql)){
　　　　　　　　// Legare le variabili come parametri alla query preparata
　　　　　　　　$stmt->bind_param("s", $param_term);
　　　　　　　　
　　　　　　　　// Impostare i parametri
　　　　　　　　$param_term = $_REQUEST["term"] . '%';
　　　　　　　　
　　　　　　　　// Tentativo di eseguire la query preparata
　　　　　　　　if($stmt->execute()){
　　　　　　　　　　　　$result = $stmt->get_result();
　　　　　　　　　　　　
　　　　　　　　　　　　// Controllare il numero di righe nella raccolta dei risultati
　　　　　　　　　　　　if($result->num_rows > 0){
　　　　　　　　　　　　　　　　// Ottenere le righe dei risultati come array associativo
　　　　　　　　　　　　　　　　while($row = $result->fetch_array(MYSQLI_ASSOC)){
　　　　　　　　　　　　　　　　　　　　echo "<p>" . $_row["name"] . "</p>";
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　} else {
　　　　　　　　　　　　　　　　echo "<p>Non sono stati trovati record corrispondenti</p>";
　　　　　　　　　　　　}
　　　　　　　　} else {
　　　　　　　　　　　　echo "Errore: impossibile eseguire $sql. " . mysqli_error($link);
　　　　　　　　}
　　　　}
　　　　　
　　　　//Fine della dichiarazione
　　　　$stmt->close();
}
　
//Chiudi la connessione
$mysqli->close();
?>

Esempio online: metodo PDO

<?php
/* Prova a connettersi al server MySQL. Supponiamo che tu stia eseguendo MySQL
Server con impostazioni predefinite (utente "root", senza password) */
try{
　　　　$_pdo = new PDO("mysql:host=localhost;dbname=demo", "root", "");
　　　　//Imposta il modello di errore PDO su eccezione
　　　　$_pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $_e) {
　　　　die("Errore: Impossibile connettersi. ". $_e->getMessage());
}
　
//Prova a eseguire la query di ricerca
try{
　　　　if(isset($_REQUEST["term"])){
　　　　　　　　//Crea la preparazione delle istruzioni
　　　　　　　　$_sql = "SELECT * FROM countries WHERE name LIKE :term";
　　　　　　　　$_stmt = $_pdo->prepare($_sql);
　　　　　　　　$_term = $_REQUEST["term"] . "%";
　　　　　　　　//Leggi i parametri nella dichiarazione
　　　　　　　　$_stmt->bindParam(":term", $_term);
　　　　　　　　//Esegui la preparazione delle istruzioni
　　　　　　　　$_stmt->execute();
　　　　　　　　if($_stmt->rowCount() > 0){
　　　　　　　　　　　　while($_row = $_stmt->fetch()){
　　　　　　　　　　　　　　　　echo "<p>" . $_row["name"] . "</p>";
　　　　　　　　　　　　}
　　　　　　　　} else {
　　　　　　　　　　　　echo "<p>Non sono stati trovati record corrispondenti</p>";
　　　　　　　　}
　　　　}　　
} catch(PDOException $_e) {
　　　　die("Errore: Impossibile eseguire $_sql. ". $_e->getMessage());
}
　
//Fine della dichiarazione
unset($stmt);
　
//Chiudi la connessione
unset($pdo);
?>

SQL SELECTistruzioni conLIKEl'uso combinato degli operatori percountriescerca record corrispondenti nella tabella del database. Abbiamo implementatopreparazione delle istruzioni,per migliorare le prestazioni di ricerca e prevenireiniezione SQLattacco

Attenzione:Prima di utilizzare l'input dell'utente nelle espressioni SQL, filtralo e verifica sempre. Puoi anche utilizzare la funzione PHP mysqli_real_escape_string() per trasformare i caratteri speciali dell'input dell'utente e creare stringhe SQL legali per prevenire l'iniezione SQL.

Funzioni Ctype PHP CRUD MySQL PHP