Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)
همانطور که پیش از این در بخش آموزش های مقدماتی گفتیم، یکی از کاربردهای فناوری موسوم به آژاکس (ajax) در صفحات وب، رد و بدل کردن اطلاعات و نمایش آنها بدون رفرش شدن صفحه است، یعنی تمام فعل و انفعالات در پشت زمینه انجام می شوند و در سمت کاربر تقریبا جزء نمایش نتایج، اتفاق خاصی رخ نمی دهد

کد آژاکس و html
برای نمایش جدول نتایج پرس و جو از دیتابیس یا یک فایل PHP ابتدا به کد آژاکس و HTML زیر احتیاج داریم که در آن با تنظیم توابع جاوا اسکریپت و آژاکس، درخواستی به سرور، بدون رفرش شدن صفحه و در پس زمینه ارسال شده و پاسخ، دریافت می شود.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش نتایج پرس و جو از دیتابیس با آژاکس</title>
<!-- http://webgoo.ir -->
<script type="text/javascript">
function showList(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("showtxt").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)
    {
    document.getElementById("showtxt").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getlist.php?q="+str,true);
xmlhttp.send();
}
</script>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<form action="">
<select name="list" onchange="showList(this.value)">
<option value="">انتخاب یک کاربر</option>
<option value="user1">کاربر 1</option>
<option value="user2">کاربر 2</option>
<option value="user3">کاربر 3</option>
</select>
</form>
<br />
<div id="showtxt">پس از انتخاب یک کاربر، اندکی صبر نمائید...</div>
</body>
</html>

توضیح:
- برای شروع ما تابع showList را ساخته ایم تا درخواست های ajax را توسط آن مدیریت کنیم.
- getElementById آی دی بلاک ما را برمی گرداند (که در کد ما با نام showtxt تنظیم شده).
- متغیری که در درخواست ما مقادیرش به سرور فرستاده می شود q نام دارد (=getlist.php?q).
- در فرم و عنصر select، با رویداد onchange مقادیر انتخابی کاربر را به تابع showList ارسال می کنیم.

فایل php جهت دریافت درخواست آژاکسی


سپس فایلی با نام getlist.php می سازیم و کدنویسی مورد نظر جهت دریافت درخواست با متد get را در آن تنظیم می کنیم؛ این کد نویسی می تواند به صورت استاتیک و بدون پایگاه داده یا به صورت داینامیک و به همراه پرس جو از پایگاه داده باشد (بستگی به هدف و نیاز شما دارد).

<?php
$user = $_GET[q];
if ($user == user1){
    echo "<table width="200" border="1">
  <tr>
    <th>کاربر یک</th>
    <td>نام کاربر یک</td>
  </tr>
</table>";
}
if ($user == user2){
    echo "<table width="200" border="1">
  <tr>
    <th>کاربر دو</th>
    <td>نام کاربر دو</td>
  </tr>
</table>";
}
if ($user == user3){
    echo "<table width="200" border="1">
  <tr>
    <th>کاربر سه</th>
    <td>نام کاربر سه</td>
  </tr>
</table>";
}
?>

توضیح:
- در فایل getlist.php ما درخواست کاربر را پردازش می کنیم، البته در مثال، به جای فراخوانی اطلاعات از پایگاه داده، اطلاعات را در فایل php خروجی می دهیم (با توجه به نیازتان می توانید از پرس و جوهای پایگاه داده نیز استفاده کنید). 



1394/05/30 4:35:55 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما