Derniers tutoriels de développement web
 

PHP - AJAX et MySQL


AJAX peut être utilisé pour une communication interactive avec une base de données.


AJAX Exemple de base de données

L'exemple suivant démontrera comment une page Web peut récupérer des informations à partir d'une base de données avec AJAX:

Exemple


Person info will be listed here...

Exemple Explained - La base de données MySQL

La table de base de données que nous utilisons dans l'exemple ci-dessus ressemble à ceci:

ça Prénom Nom de famille Âge Ville natale Emploi
1 Peter Griffon 41 Quahog Brasserie
2 Lois Griffon 40 Newport Professeur de piano
3 Joseph swanson 39 Quahog Officier de police
4 Glenn Bourbier 41 Quahog Pilote


exemple Explained

Dans l'exemple ci - dessus, lorsqu'un utilisateur sélectionne une personne dans la liste déroulante ci - dessus, une fonction appelée " showUser() " est exécutée.

La fonction est déclenchée par l'événement onchange.

Voici le code HTML:

Exemple

<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.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>
»Exécuter exemple

explication Code:

Tout d' abord, vérifier si aucune personne est sélectionnée (str == "") . Si aucune personne est sélectionnée, effacer le contenu de l'espace réservé txtHint et quitter la fonction.

Si une personne est sélectionnée, procédez comme suit:

  • Créer un objet XMLHttpRequest
  • Créer la fonction à exécuter lorsque la réponse du serveur est prêt
  • Envoyez la demande hors d'un fichier sur le serveur
  • Notez qu'un paramètre (q) est ajouté à l'URL (avec le contenu de la liste déroulante)

Le fichier PHP

La page sur le serveur appelé par le JavaScript ci - dessus est un fichier PHP appelé "getuser.php" .

Le code source dans "getuser.php" exécute une requête sur une base de données MySQL, et renvoie le résultat dans un tableau 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>

Explication: Lorsque la requête est envoyée du JavaScript au fichier PHP, ce qui suit se produit:

  1. PHP ouvre une connexion à un serveur MySQL
  2. La personne est trouvée
  3. Une table HTML est créé, rempli de données, et renvoyé à la "txtHint" espace réservé