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