PHP - AJAX e MySQL
AJAX può essere utilizzato per la comunicazione interattiva con un database.
Esempio di database AJAX
L'esempio seguente dimostrerà come una pagina Web può recuperare informazioni da un database con AJAX:
Esempio
Esempio spiegato: il database MySQL
La tabella del database che utilizziamo nell'esempio sopra è simile a questa:
| 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 |
Esempio spiegato
Nell'esempio sopra, quando un utente seleziona una persona nell'elenco a discesa sopra, viene eseguita una funzione chiamata "showUser()".
La funzione viene attivata dall'evento onchange.
Ecco il codice HTML:
Esempio
<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>
Spiegazione del codice:
Innanzitutto, controlla se la persona è selezionata. Se nessuna persona è selezionata (str == ""), cancella il contenuto di txtHint ed esci dalla funzione. Se viene selezionata una persona, procedere come segue:
- Creare un oggetto XMLHttpRequest
- Creare la funzione da eseguire quando la risposta del server è pronta
- Invia la richiesta a un file sul server
- Si noti che un parametro (q) viene aggiunto all'URL (con il contenuto dell'elenco a discesa)
Il file PHP
La pagina sul server chiamata dal JavaScript sopra è un file PHP chiamato "getuser.php".
Il codice sorgente in "getuser.php" esegue una query su un database MySQL e restituisce il risultato in una tabella 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>Spiegazione: Quando la query viene inviata da JavaScript al file PHP, accade quanto segue:
- PHP apre una connessione a un server MySQL
- La persona giusta è stata trovata
- Viene creata una tabella HTML, riempita di dati e rimandata al segnaposto "txtHint".