مثال MySQL و AJAX في PHP

AJAX can be used for interactive communication with the database.

AJAX Database Example

In the following AJAX example, we will demonstrate how a web page uses AJAX technology to read information from a MySQL database.

Select a customer from the drop-down list


Customer information will be listed here.

This application consists of four elements:

  • MySQL Database
  • A simple HTML form
  • JavaScript
  • PHP Page

Database

The database used in this example looks something like this:

id CustomerID CompanyName ContactName Address City PostalCode Country
1 Alibaba Alibaba Group Ma Yun ...... Hangzhou 310002 الصين
2 APPLE Apple Inc. Tim Cook ...... Cupertino 95014 USA
3 BAIDU BAIDU Inc. Li YanHong ...... Beijing 100080 الصين
4 كانون شركة كانون أمريكا تسونياجي اوشيدا ...... نيويورك 11042 USA

توضيح المثال

في هذا المثال، عند اختيار المستخدم للعميل من القائمة المنسدلة أعلاه، يتم تنفيذ الوظيفة التي تُدعى "showUser()".

الوظيفة هذه تُطلق بواسطة حدث onchange.

هذا كود HTML هو:

مثال

<!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="">اختر عميلًا:</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>سيتم عرض معلومات العملاء هنا.</b></div>
</body>
</html>

تشغيل نموذج

توضيح الكود:

أولاً، تأكد من أن العميل تم اختياره. إذا لم يتم اختيار أي عميل (str == ""), فأزيل محتوى txtHint واخرج من الدالة. إذا تم اختيار عميل، فت�行 الخطوات التالية:

  • إنشاء جسم XMLHttpRequest
  • إنشاء دالة ستتم تنفيذها عند استعداد الاستجابة من الخادم
  • إرسال الطلب إلى ملف على الخادم
  • لاحظ أن المعامل (q) يتم إضافته إلى URL (المحتوى الموجود في القائمة المنسدلة)

ملف PHP

صفحة الـ JavaScript التي يتم استدعاؤها على الخادم هي ملف PHP يسمى "getuser.php".

مصدر الكود في ملف "getuser.php" يقوم بتنفيذ استعلامات قاعدة بيانات MySQL وإرجاع النتائج في جدول 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>CompanyName</th><td>" . $row['CompanyName'] . "</td></tr>";
    echo "<tr><th>ContactName</th><td>" . $row['ContactName'] . "</td></tr>";
    echo "<tr><th>Address</th><td>" . $row['Address'] . "</td></tr>";
    echo "<tr><th>City</th><td>" . $row['City'] . "</td></tr>";
    echo "<tr><th>PostalCode</th><td>" . $row['PostalCode'] . "</td></tr>";
    echo "<tr><th>Country</th><td>" . $row['Country'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>

التوضيح: عند إرسال استعلام من JavaScript إلى ملف PHP، يحدث ما يلي:

  • PHP فتح الاتصال بـ MySQL Server
  • تم العثور على العميل الصحيح
  • إنشاء جدول HTML، ملء البيانات، وإرسال "txtHint" كحرف استبدال