پی ایچ پی اور ایجاک میڈی کوئل ڈیٹا بیس مثال
- پچھلے پیج AJAX ایکسمل
- پائیدھار AJAX responseXML
AJAX میتواند برای ارتباط تعاملی با پایگاه داده استفاده شود.
مثال پایگاه داده AJAX
در این مثال AJAX، ما نشان خواهیم داد که چگونه یک وبسایت از تکنولوژی AJAX برای خواندن اطلاعات از پایگاه داده MySQL استفاده میکند.
در لیست کشویی یک مشتری انتخاب کنید
این برنامه از چهار عنصر تشکیل شده است:
- پایگاه داده MySQL
- یک فرم ساده HTML
- جاوااسکریپت
- صفحه PHP
پایگاه داده
در این مثال، پایگاه دادهای که از آن استفاده میکنیم، به این شکل به نظر میرسد:
id | شماره مشتری | نام کمپانی | نام تماس | آدرس | شهر | کد پستی | کشور |
---|---|---|---|---|---|---|---|
1 | آلی بابا | گروپ علی بابا | ما یون | ...... | هانگزو | 310002 | چین |
2 | APPLE | کمپنی Apple | تیم کوک | ...... | کوپرتینو | 95014 | ایالات متحده |
3 | BAIDU | کمپنی BAIDU | لی یان هونگ | ...... | بکنگ | 100080 | چین |
4 | کانن | کانن امریکا اینک | تسونئی اچیدا | ...... | نیویورک | 11042 | ایالات متحده |
توضیحات مثال
در مثال بالا، هنگامی که کاربر در لیست پایین مشتریان را انتخاب میکند، تابع به نام "showUser()" اجرا میشود.
این تابع توسط رویداد onchange فعال میشود.
این کد HTML است:
مثال
<!doctype html> <html> <head> <script> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { // کد برای IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // کد برای 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">آلوبا</option> <option value="2">آپل</option> <option value="3">بایدو</option> <option value="4">کانن</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 ""; echo " CompanyName " . $row['CompanyName'] . " "; echo " ContactName " . $row['ContactName'] . " "; echo " Address " . $row['Address'] . " "; echo " City " . $row['City'] . " "; echo " PostalCode " . $row['PostalCode'] . " "; } echo ""; mysqli_close($con); ?> Country " . $row['Country'] . "
解释:当查询从 JavaScript 发送到 PHP 文件时,会发生以下情况:
- PHP مائیکراس کوئل سرور کے ساتھ کانکشن کھولتا ہے
- درست گریز کا مشتری پائا گیا
- ایک ایچ تی ایم ایل ٹیبل بنائیں، اعداد و شمار داخل کریں، اور 'txtHint' مخطط کار کا استعمال کریں
- پچھلے پیج AJAX ایکسمل
- پائیدھار AJAX responseXML