پی ایچ پی اور ایجاک میڈی کوئل ڈیٹا بیس مثال

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 "CompanyName" . $row['CompanyName'] . "";
    echo "ContactName" . $row['ContactName'] . "";
    echo "Address" . $row['Address'] . "";
    echo "City" . $row['City'] . "";
    echo "PostalCode" . $row['PostalCode'] . "";
    echo "Country" . $row['Country'] . "";
}
echo "";
mysqli_close($con);
?>

解释:当查询从 JavaScript 发送到 PHP 文件时,会发生以下情况:

  • PHP مائیکراس کوئل سرور کے ساتھ کانکشن کھولتا ہے
  • درست گریز کا مشتری پائا گیا
  • ایک ایچ تی ایم ایل ٹیبل بنائیں، اعداد و شمار داخل کریں، اور 'txtHint' مخطط کار کا استعمال کریں