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

آموزش برنامه نویسی و مهارتهای وب

article 

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

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

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


یکشنبه 13 مهر 1393

نظرات ()


دوشنبه 16 مرداد 1396 07:29 ق.ظ
Excellent article. Keep posting such kind
of information on your site. Im really impressed by
it.
Hello there, You've done a great job. I'll certainly digg it and for my part recommend to
my friends. I'm sure they will be benefited from this
web site.
جمعه 13 مرداد 1396 08:49 ب.ظ
If you desire to obtain a great deal from this post then you
have to apply such methods to your won blog.
جمعه 25 فروردین 1396 02:18 ق.ظ
BHW
I really like reading an article that will make people think.

Also, thanks for allowing me to comment!

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )