• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آژاکس(ajax)-نمایش نتایج پایگاه داده و فایل php با آژاکس

S

sky boy

متخصص بخش برنامه نویسی

در این مطلب کدی کاربردی رو میبینید که به کمکش می تونید در هر لحظه پس از انتخاب لیستی از فرم و منوی انتخاب شونده،
نتایج رو از یک فایل php یا پایگاه داده فراخوانی کنید و به نمایش دربیاورید،
این کد برخلاف کتابخانه های جی کئوری (jquery) و امثالش اصلا حجم زیادی نداره و کاملا استانداردهست.

کد آژاکس و html

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

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>
<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 ارسال می کنیم.





 
S

sky boy

متخصص بخش برنامه نویسی

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

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

PHP: 
<?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 خروجی می دهیم
(با توجه به نیازتان می توانید از پرس و جوهای پایگاه داده نیز استفاده کنید).


 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا