میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

واکشی اطلاعات پایگاه داده با ajax

ا استفاده از AJAX، می توانید با پایگاه داده ارتباط متقابل داشته باشید.


واکشی اطلاعات از پایگاه داده با استفاده از AJAX

در مثال زیر، نحوه واکشی اطلاعات از پایگاه داده، با استفاده از AJAX نشان داده شده است:

مثال (واکشی اطلاعات پایگاه داده با ajax)

 

idFirstNameLastNameAgeHometownJob
۱PeterGriffin۳۰QuahogBrewery
۲LoisGriffin۳۵QuahogPiano Teacher
۳JosephSwanson۲۵NewportPilot
۴LoisSwanson۲۸NewportPiano Teacher
۵GlennQuagmire۳۸NewportPilot


توضیح مثال – صفحه HTML

زمانی که کاربر، یکی از آیتم های لیست کشویی بالا را انتخاب می کند، تابع “()showUser” فراخوانی و اجرا می شود. این تابع توسط رویداد “onchange” راه اندازی می شود:

<html>
<head>
<script>
function showUser(str) {
if (str == “”) {
document.getElementById(“txtHint”).innerHTML = “”;
return;
else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == ۴ && this.status == ۲۰۰) {
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>

تابع ()showUser کارهای زیر را انجام می دهد:

  • چک می کند که یک شخص انتخاب شده باشد. (اگر گزینه ای انتخاب نشده باشد، محتوی عنصر با شناسه “txtHint” خالی می شود)
  • یک شیء XMLHttpRequest ایجاد می شود.
  • زمانی که پاسخ سرور آماده باشد، یک تابع ایجاد و اجرا می شود. (وظیفه این تابع این است که پاسخ دریافت شده از سرور را در عنصر با شناسه “txtHint” قرار دهد)
  • درخواست یک فایل به سرور ارسال می شود.
  • توجه داشته باشید که یک پارامتر (q) به URL اضافه شده است (با محتوای گزینه انتخاب شده)

توضیح مثال – فایل PHP

فایلی که توسط کد JavaScript بالا صدا زده می شود یک فایل PHP بنام “getuser.php” است.

در فایل “getuser.php”، یک query در پایگاه داده MySQL اجرا می شود و نتیجه در یک جدول HTML برگردانده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: ۱۰۰%;
border-collapse: collapse;
}
table, td, th {
border: ۱px solid black;
padding: ۵px;
}

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 ارسال می شود، کارهای زیر اتفاق می افتد:

  1. یک ارتباط به پایگاه داده MySQL ایجاد می شود.
  2. شخص مورد نظر پیدا می شود.
  3. یک جدول HTML ایجاد و با داده های مناسب پر می شود و در نهایت داده ها برگشت می شود و در عنصر با شناسه “txtHint” قرار می گیرد.

امیدواریم آموزش واکشی اطلاعات پایگاه داده با ajax نیز برای شما مفید واقع شده باشد .برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

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

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟