واکشی اطلاعات پایگاه داده با ajax
با استفاده از AJAX، می توانید با پایگاه داده ارتباط متقابل داشته باشید.
واکشی اطلاعات از پایگاه داده با استفاده از AJAX
در مثال زیر، نحوه واکشی اطلاعات از پایگاه داده، با استفاده از AJAX نشان داده شده است:
مثال (واکشی اطلاعات پایگاه داده با ajax)
اطلاعات شخص انتخاب شده، اینجا نمایش داده می شود ...
توضیح مثال - پایگاه داده MySQL
جدولی که در مثال بالا از آن استفاده شده است:
| id | FirstName | LastName | Age | Hometown | Job |
|---|---|---|---|---|---|
| 1 | Amir | Pahlavansadegh | 30 | Isfahan | Developer |
| 2 | Nader | Karimi | 35 | Isfahan | Developer |
| 3 | Farshid | Aslani | 25 | Isfahan | Developer |
| 4 | Sara | Ahmadi | 28 | Isfahan | Developer |
| 5 | reza | Masomi | 38 | Isfahan | Developer |
توضیح مثال - صفحه HTML
زمانی که کاربر، یکی از آیتم های لیست کشویی بالا را انتخاب می کند، تابع "()showUser" فراخوانی و اجرا می شود. این تابع توسط رویداد "onchange" راه اندازی می شود:
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">انتخاب کنید</option>
<option value="1">Amir Pahlavansadegh</option>
<option value="2">Nader karimi</option>
<option value="3">farshad Aslani</option>
<option value="4">Sara Ahmadi</option>
<option value="5">Reza Masomi</option>
</select>
</form>
<br>
<div id="txtHint"><b>اطلاعات شخص انتخاب شده، اینجا نمایش داده می شود ...</b></div>
</body>
</html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">انتخاب کنید</option>
<option value="1">Amir Pahlavansadegh</option>
<option value="2">Nader karimi</option>
<option value="3">farshad Aslani</option>
<option value="4">Sara Ahmadi</option>
<option value="5">Reza Masomi</option>
</select>
</form>
<br>
<div id="txtHint"><b>اطلاعات شخص انتخاب شده، اینجا نمایش داده می شود ...</b></div>
</body>
</html>
تابع ()showUser کارهای زیر را انجام می دهد:
- چک می کند که یک شخص انتخاب شده باشد. (اگر گزینه ای انتخاب نشده باشد، محتوی عنصر با شناسه "txtHint" خالی می شود)
- یک شیء XMLHttpRequest ایجاد می شود.
- زمانی که پاسخ سرور آماده باشد، یک تابع ایجاد و اجرا می شود. (وظیفه این تابع این است که پاسخ دریافت شده از سرور را در عنصر با شناسه "txtHint" قرار دهد)
- درخواست یک فایل به سرور ارسال می شود.
- توجه داشته باشید که یک پارامتر (q) به URL اضافه شده است (با محتوای گزینه انتخاب شده)
توضیح مثال - فایل PHP
فایلی که توسط کد JavaScript بالا صدا زده می شود یک فایل PHP بنام "getuser.php" است.
در فایل "getuser.php"، یک query در پایگاه داده MySQL اجرا می شود و نتیجه در یک جدول HTML برگردانده می شود.
<?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 border='1'>
<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);
?>
$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 border='1'>
<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);
?>
توضیح: زمانی که درخواست از JavaScript به فایل PHP ارسال می شود، کارهای زیر اتفاق می افتد:
- یک ارتباط به پایگاه داده MySQL ایجاد می شود.
- شخص مورد نظر پیدا می شود.
- یک جدول HTML ایجاد و با داده های مناسب پر می شود و در نهایت داده ها برگشت می شود و در عنصر با شناسه "txtHint" قرار می گیرد.
برای مشاهده فیلم ها و آموزش های پروژه محور برنامه نویسی PHP کلیک کنید.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 19395
دیدگاه‌ها
سلام
در فایل getuser.php برای بالا بردن امنیت کاراکترهای ورودی و جلوگیری از هک سایت، آیا بهتر نیست از htmlspecialchar s استفاده کرد؟
سلام، بله می توان از تابع مذکور استفاده نمود.