مثال‌های استفاده از پایگاه داده MySQL با AJAX و PHP

AJAX می‌تواند برای ارتباط تعاملی با داده‌بندی استفاده شود.

مثال داده‌بندی AJAX

در این مثال AJAX، نحوه استفاده از تکنولوژی AJAX برای خواندن اطلاعات از داده‌بندی MySQL توضیح داده خواهد شد.

در لیست کشویی یک مشتری انتخاب کنید


در اینجا اطلاعات مشتریان لیست خواهد شد.

این برنامه از چهار عنصر تشکیل شده است:

  • داده‌بندی MySQL
  • یک فرم ساده HTML
  • JavaScript
  • صفحه PHP

داده‌بندی

داده‌بندی که در این مثال از آن استفاده می‌شود، شبیه این است:

id شماره مشتری نام شرکت نام تماس آدرس شهر کد پستی کشور
1 Alibaba گروه Alibaba ما یون ...... هانگژو 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 "<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);
?>

Explanation: When a query is sent from JavaScript to a PHP file, the following occurs:

  • PHP opens a connection to the MySQL server
  • Found the correct customer
  • Create an HTML table, fill in the data, and send back the 'txtHint' placeholder