تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین