PHP - أجاكس و MySQL
يمكن استخدام AJAX للتواصل التفاعلي مع قاعدة البيانات.
مثال على قاعدة بيانات أجاكس
سيوضح المثال التالي كيف يمكن لصفحة الويب جلب المعلومات من قاعدة بيانات باستخدام AJAX:
مثال
شرح المثال - قاعدة بيانات MySQL
يبدو جدول قاعدة البيانات الذي نستخدمه في المثال أعلاه كما يلي:
| 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 |
شرح المثال
في المثال أعلاه ، عندما يختار المستخدم شخصًا في القائمة المنسدلة أعلاه ، يتم تنفيذ وظيفة تسمى "showUser ()".
يتم تشغيل الوظيفة بواسطة حدث onchange.
ها هو كود HTML:
مثال
<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>
شرح الكود:
أولاً ، تحقق مما إذا تم اختيار الشخص. إذا لم يتم تحديد أي شخص (str == "") ، امسح محتوى txtHint واخرج من الوظيفة. إذا تم تحديد شخص ما ، فقم بما يلي:
- قم بإنشاء كائن XMLHttpRequest
- قم بإنشاء الوظيفة التي سيتم تنفيذها عندما تكون استجابة الخادم جاهزة
- أرسل الطلب إلى ملف موجود على الخادم
- لاحظ أنه تمت إضافة المعامل (q) إلى عنوان URL (مع محتوى القائمة المنسدلة)
ملف PHP
الصفحة الموجودة على الخادم التي يطلق عليها JavaScript أعلاه هي ملف PHP يسمى "getuser.php".
يقوم الكود المصدري في "getuser.php" بتشغيل استعلام على قاعدة بيانات MySQL ، ويعيد النتيجة في جدول 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>توضيح: عند إرسال الاستعلام من JavaScript إلى ملف PHP ، يحدث ما يلي:
- يفتح PHP اتصالاً بخادم MySQL
- تم العثور على الشخص الصحيح
- يتم إنشاء جدول HTML وتعبئته بالبيانات وإرساله مرة أخرى إلى العنصر النائب "txtHint"