PHP ve AJAX MySQL Veritabanı Örneği

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 Çin
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 Çin
4 Canon Canon USA Inc. Tsuneji Uchida ...... New York 11042 USA

Örnek Açıklaması

Yukarıdaki örnekte, kullanıcı yukarıdaki açılır listeden bir müşteri seçtiğinde, 'showUser()' adlı fonksiyon çalışır.

Bu fonksiyon onchange olayı tarafından tetiklenir。

Bu HTML kodudur：

Örnek

<!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="">Lütfen bir müşteri seçin：</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>Customer bilgileri burada listelenecektir.</b></div>
</body>
</html>

Çalıştırma örneği

Kod açıklaması:

Öncelikle, bir müşteri seçildiğini kontrol edin. Eğer hiçbir müşteri seçilmediyse (str == ""), txtHint içeriğini temizleyin ve fonksiyondan çıkın. Bir müşteri seçildiyse, aşağıdaki adımları gerçekleştirin:

  • XMLHttpRequest nesnesi oluşturun
  • Sunucu yanıtı hazır olduğunda çalıştırılacak fonksiyon oluşturun
  • İstek sunucudaki dosyaya gönderilir
  • Lütfen dikkat edin, parametre (q) URL'ye (aşağıdakı açılır listedeki içerik) eklenmiştir.

PHP dosyası

Yukarıdaki JavaScript çağrısı sunucudaki adı “getuser.php” olan bir PHP dosyasıdır.

“getuser.php” dosyasındaki kaynak kod MySQL veritabanına sorgu çalıştırır ve HTML tablosunda sonuçları döndürür:

<?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>Şirket Adı</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>İletişim Adı</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Adres</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>Şehir</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>Posta Kodu</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Ülke</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

Açıklama: JavaScript'ten PHP dosyasına sorgu gönderildiğinde aşağıdaki durumlar ortaya çıkar:

  • PHP ile MySQL sunucusu ile bağlantı aç
  • Doğru müşteri bulundu
  • Bir HTML tablosu oluşturun, verileri doldurun ve "txtHint" yer tutucusuna geri gönderin