Exemple de base de données MySQL AJAX avec PHP

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。

在下拉列表中选择一个客户


此处将列出客户信息。

这个应用程序由四个元素组成：

  • MySQL 数据库
  • 一张简单的 HTML 表单
  • JavaScript
  • PHP 页面

数据库

数据库看起来类似这样：

id CustomerID CompanyName ContactName Address City PostalCode Country
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 China
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 China
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 USA

Explication de l'exemple

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

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

Voici le code HTML :

Exemple

<!doctype html>
<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  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 (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","/demo/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Sélectionnez un client :</option>
<option value="1">Alibaba</option>
<option value="2">APPLE</option>
<option value="3">BAIDU</option>
<option value="4">Canon</option>
<option value="5">Google</option>
<option value="6">HUAWEI</option>
<option value="7">Microsoft</option>
<option value="8">Nokia</option>
<option value="9">SONY</option>
<option value="10">Tencent</option>
</select>
</form>
<br>
<div id="txtHint"><b>Les informations client seront affichées ici.</b></div>
</body>
</html>

Exécution de l'exemple

Explication du code :

Tout d'abord, vérifiez si un client a été sélectionné. Si aucun client n'a été sélectionné (str == ""), supprimez le contenu de txtHint et quittez la fonction. Si un client a été sélectionné, effectuez les opérations suivantes :

  • Créer un objet XMLHttpRequest
  • Créer une fonction à exécuter lorsque le serveur est prêt à répondre
  • Envoyer la requête au fichier sur le serveur
  • Veuillez noter que le paramètre (q) est ajouté à l'URL (contenant un contenu avec une liste déroulante)

Fichier PHP

La page appelée par JavaScript sur le serveur est un fichier PHP nommé "getuser.php".

Le code source de "getuser.php" effectue des requêtes sur la base de données MySQL et affiche les résultats dans un tableau HTML :

<?php
$q = intval($_GET['q']);
$con = mysqli_connect('MyServer','MyUser','MyPassword','Customers');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM customerslist WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr><th>CustomerID</th><td>" . $row['CustomerID'] . "</td></tr>";
    echo "<tr><th>Nom de l'entreprise</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>Nom du contact</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Adresse</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>Ville</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Code postal</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Pays</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Explication : Lorsque une requête est envoyée de JavaScript vers un fichier PHP, le suivant se produit :

  • PHP ouvre la connexion au serveur MySQL
  • Le client correct a été trouvé
  • Créez un tableau HTML, remplissez les données et envoyez le "txtHint" en tant que symbole de remplacement