parsgreen.com
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
related مطالب بیشتر:
» نمایش داینامیک و صفحه به صفحه مطالب با آژاکس
» ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)
» آموزش نحوه آپلود فایل با php و آژاکس (ajax)
» لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql
» اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
commentنظرات (۳۳ یادداشت برای این مطلب ارسال شده است)
نویسنده: mohammad
زمان: ۱۸:۰۷:۴۷ - تاریخ: ۱۳۹۱/۰۹/۲۵
سلام یه کد آجاکس یا جی کوئری می خوام که هر بار گزینه "ادامه" رو زدیم یه باکس به اندازی مثلا 200px height بیشتر بشه و هر وقت که دکمه "بازگشت" را زدیم به حالت اولیه باز گرده.... می تونید همچین کدی رو در اختیار من بزارید؟ یه دنیا ممنون
پاسخ: 
سلام
نمونه کد مورد نظر شما از جی کئوری استفاده می کند، متاسفانه نمونه ای آماده در اختیار نداریم ولی اگر در وب جستجو کنید احتمالا مواردی وجود دارد.
نویسنده: mohammad
زمان: ۲۲:۵۰:۵۸ - تاریخ: ۱۳۹۱/۰۹/۲۵
تو سایت های خارجی هم گشتم نبود :(
پاسخ: 
باید سایتی پیدا کنید که از این افکت استفاده کرده باشد، سپس از نمونه کد های آن استفاده کنید.
نویسنده: صلاحی
زمان: ۱۹:۰۲:۱۰ - تاریخ: ۱۳۹۱/۰۹/۲۶
واقعاً سایت خوبی دارید.
آموزش‌ها کاملاً کاربردی هستند و به درد من یکی خیلی خوردند.
با تشکر از مدیریت سایت و آرزوی موفقیت برای ایشان
پاسخ: 
ممنون از نظر لطف شما.
نویسنده: حبیب
زمان: ۱۴:۵۰:۴۵ - تاریخ: ۱۳۹۱/۱۰/۰۷
با سلام آموزش افزودن رکورد در بانک اطلاعاتی توسط آژاکس رو می خواستم ممنون میشم
پاسخ: 
سلام
آژاکس به تنهایی قابلیت کار با پایگاه داده را ندارد و باید در کنار یک زبان سمت سرور مانند php استفاده شود (آژاکس فایل را فراخوانی می کند و دستورات در فایل php اجرا می شوند)، لذا برای این کار کافی است نحوه فراخوانی یک فایل با آژاکس را فرا بگیرید (که در آموزش های مقدماتی آژاکس توضیح داده شده) و در کنار آن نحوه کار با دستورات php و mysql را هم بلد باشید (که این مورد هم در بخش آموزش های مقدماتی mysql توضیح داده شده است).
نویسنده: حبیب
زمان: ۰۰:۲۹:۲۳ - تاریخ: ۱۳۹۱/۱۰/۱۸
با سلام در قسمت اچ تی ام ال کاربرد دو خط زیر چیه میشه توضیح بدین
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
ممنون
پاسخ: 
سلام
این کدها برای تعیین نوع سند و نسخه html صفحه مورد نظر کاربرد دارند، از آنجایی که html در نسخه های متفاوت ارائه شده و هر کدام کم و بیش با هم تفاوت هایی دارند، برای اینکه مرورگرها به درستی نسخه استفاده شده در صفحه وب را تشخیص دهند توصیه می شود که با کدهای استاندارد به سند dtd (یک استاندارد تعریف شده است) آن نسخه ارجاع داده شود.
برای کسب اطلاعات بیشتر این مطلب کمک خواهد کرد:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نویسنده: mary
زمان: ۱۳:۰۴:۴۳ - تاریخ: ۱۳۹۱/۱۲/۰۸
سلام من کد شما رو استفاده کردم و جواب داد اما یه مشکل دارم اینکه با تغییر مقدار لیست کشویی ابتدا بدنه صفحه سایت تکرار شده و بعد داخل تکرار رکورد نمایش داده می شه
اگه امکان داره فوری جواب رو به ایمیل بفرستید باید فردا 10:30 پروژه رو تحویل بدم
پاسخ: 
سلام
فایل php مقصد که درخواست آژاکس به آن ارسال می شود باید تنها موارد مورد نیاز را چاپ کند نه چیز دیگری، به طور مثال از کدهای html نباید در آن فایل استفاده شده باشد، در غیر این صورت به همراه سایر موارد به عنوان خروجی، توسط کد آژاکس دریافت شده و در مرورگر نشان داده می شوند.
نویسنده: مازیار
زمان: ۰۹:۰۰:۳۰ - تاریخ: ۱۳۹۱/۱۲/۲۳
من کد شما را با یک تایمر ترکیب کردم و جواب داد هر 60 ثانیه مطالب به روز می شود ولی الان یک مشکل دارم می خواهم 2 بار از این کد در یک صفحه استفاده کنم ولی تنها کد دوم کار می کند و اولی از کار می افتد لطفا راهنمایی کنبد چگونه این تداخل کد را بر طرف نمایم دلیل استفاده 2 کد یکسان در یک صفحه این است که بنده یک باکس در بالای سایت دارم و دیگری در پایین مجبورم برا هر کدام یک کد جداگانه استفاده کنم
پاسخ: 
سلام
هرچند دقیقا نمی دانیم کدها را چگونه ترکیب و استفاده کرده اید، اما در کل راه حل این گونه موارد این است که فرآیند فراخوانی، اجرا و نمایش خروجی را به صورت داینامیک تبدیل کنید، یعنی به طور مثال برای باکس اول، تابع با یک پارامتر دوم فراخوانی شود:
<select name="list" onchange="showList(this.value, 1)">
که به فرض در اینجا ما عدد 1 را به عنوان آرگومان دوم قرار داده ایم، سپس در تابع اصلی نیز این آرگومان تعریف شده باشد:
function showList(str, num)
در کد هر جا که نیاز به استفاده از مقادیر یکتا (برای دو باکس متفاوت) است، باید ببینیم تابع توسط کدام باکس فراخوانی شده تا خروجی نیز متناسب با آن ارسال شود، به فرض برای تشخیص اینکه چه بلاکی مد نظر است، آرگومان دوم را بررسی می کنیم:
var xmlhttp;
if(num == 1){
var block = "showtxt_1";
}
else{
var block = "showtxt_2";
}
if (str == ""){
document.getElementById(block).innerHTML = "";
return;
}
در قسمت های دیگر کد نیز که به صورت استاتیک آی دی بلاک را (با عنوان showtxt) نوشته ایم، از روش بالا استفاده کرده و عنوان داینامیک را جایگزین می کنیم.
البته انجام صحیح تغییرات بالا تا حدود زیادی به آشنایی شما با جاوا اسکریپت بستگی دارد.
نویسنده: مازیار
زمان: ۱۴:۴۸:۲۴ - تاریخ: ۱۳۹۱/۱۲/۲۳
سلام
متاسفانه موفق نشدم ویرایش را به درستی انجام بدم اگه ممکنه لطف کنید یک لینک گذاشتم که نمونه کد درون ان قرار دارد ممنون می شوم تغییرات را اعمال کنید فرم برای ذخیره هم دارد لطفا بعد از ویرایش submit کنید که ذخیره بشه برام
پیشاپیش از لطف شما سپاسگذارم
پاسخ: 
سلام
ظاهرا منظورتان این است که یک نتیجه را در دو قسمت به صورت زنده نمایش دهید، این کار با آنچه توضیح دادیم متفاوت است و البته چون شما در مطلب کنونی مشکل خود را مطرح کرده اید، تصور ما بر همین مطلب بود، به هر صورت برای مورد شما کافی است در هنگام چاپ خروجی از آی دی دو بلاک متفاوت در دو دستور استفاده کنید تا مقادیر در دو div مختلف خروجی داده شوند.
نویسنده: مازیار
زمان: ۲۱:۱۰:۲۹ - تاریخ: ۱۳۹۱/۱۲/۲۳
ممنون از توضیحتان
ولی محتوای این دو باکس متفاوت است در صورتی که منبع فراخوانی یک فایل php است به زبان ساده 2 فایل php باید فراخوانی شود و محتوای هر فایل در یک باکس نمایش داده شود در این مورد باید چه کار انجام دهم
پاسخ: 
در این صورت باید برای هر فایل یک کد مجزا تعریف کنید و نام توابع در هر کد به صورت یکتا باشند تا از تداخل جلوگیری شود، به فرض این کار را در نمونه کدی که آدرس آن را قرار داده اید به صورت افزودن یک شماره متناظر به هر قسمت که نیاز است انجام داده ایم، برای باکس دیگر، این شماره ها را یک مقدار افزایش دهید، بلاک div هم باید آی دی متناظر با آنچه در تابع تنظیم شده است را داشته باشد، یعنی هر بلاک باید یک آی دی یکتا داشته باشد.
نویسنده: رضا
زمان: ۱۶:۴۲:۳۲ - تاریخ: ۱۳۹۲/۰۵/۳۰
سلام
من می خواهم اطلاعات وارد شده از طریق فرم ثبت املاک را در یک سایت املاک بدون اینکه فرد در صفحه ی اصلی رفرش کند ببیند
یعنی اگر یک ملک در پایگاه داده یک سایت ثبت شد کاربران انلاین در صفحه ی اصلی بدون استفاده از بارگذاری مجدد ان اطلاعات را مشاهده نمایند
از کدام توابع اژاکس شما استفاده کنم تا این امکان برای من محقق شود با تشکر
پاسخ: 
سلام
نیاز شما صرفا با استفاده از یک تابع رفع نمی شود!
بخشی از کدها به آژاکس مربوط می شود که آن ارسال درخواست و دریافت پاسخ از سرور است (آموزش حاضر و موارد مشابه)، بخش دیگر مربوط به فراخوانی نتایج از پایگاه داده و در واقع استفاده از PHP و MySQL است که باید به آموزش های مرتبط با آن (و ترجیحا شروع از آموزش های مقدماتی) مراجعه کنید.
نویسنده: sajjad
زمان: ۰۱:۰۲:۱۲ - تاریخ: ۱۳۹۲/۰۶/۱۳
سلام - خیلی خیلی خیلی ممنون از لطفتون بابت این آموزش .
نویسنده: مجید
زمان: ۱۹:۴۶:۳۴ - تاریخ: ۱۳۹۲/۰۷/۲۵
دم شما گرم دقیقا چیزی بود که دنبالش میگشتم
استفاده در Select ها
نویسنده: نفس
زمان: ۱۸:۱۸:۰۲ - تاریخ: ۱۳۹۲/۰۸/۰۳
سلام و خدا قوت. میشه کاری کرد که اطلاعات رو از پایگاه داده بگیره؟ مثلا جدولی که نام استان ها به همراه پیش شماره اون استان ها هست. و کاربر اگر از لیست باکس نام استان رو انتخاب کنه کد استان براش به نمایش در بیاد
پاسخ: 
سلام
قاعدتا چنین کاری امکانپذیر است، Ajax صرفا یک روش جایگزین برای حالت عادی است، لذا می توانید در بستر آن یک درخواست به سرور (فایل PHP) ارسال کنید، در کدهای PHP به MySQL متصل شده و متناسب با آن، هر خروجی که بخواهید را به عنوان پاسخ برگردانید، به طور مثال در کدهای آموزش داده شده از خروجی بدون دیتابیس استفاده شده که به راحتی می توان مشابه آن را با دیتابیس نیز ساخت (سخت یا آسان بودن نوشتن این سیستم به میزان آشنایی شما با PHP، MySQL و JavaScript برمی گردد).
نویسنده: رضا
زمان: ۱۵:۵۱:۲۵ - تاریخ: ۱۳۹۲/۰۸/۰۹
خیلی توضیح کاملی بود فقط من متوجه تابع open نشدم پارامتر دومش که یه لینک هست اگه کدهای php و javascript در یک صفحه باشن به چه ترتیب میشه
پاسخ: 
چنین حالتی توصیه نمی شود، در صورتی که چاره دیگری نبود، باید با دستورات شرطی (if، else و...) و متد GET یا POST حالت پاسخ و درخواست را از هم جدا کنید تا با مشکل روبرو نشوید (نیازمند آشنایی در حد متوسط به بالا با PHP است).
نویسنده: رضا
زمان: ۲۱:۱۴:۱۵ - تاریخ: ۱۳۹۲/۰۸/۰۹
من یه سایت مجازی رو سیستمم دارم با این ادرس
http://127.0.0.1:8888/login.php
تمام سایت من همین صفحه است حالا کدهای اژاکس رو در قسمت head می نویسم و میخوام با یه دکمه تو همین صفحه اتفاق بیفته ولی نمی دونم url مربوط به تابع open رو چی قرار بدم. ایا باید صفحه ای جداگانه بسازم یا راهی برای این ارتباط هست. با تشکر
پاسخ: 
در پاسخ قبلی گفته شده، چنین حالتی توصیه نمی شود، بهتر است ارسال و دریافت درخواست در دو فایل جداگانه باشد، در غیر این صورت (اگر فایل یکی باشد) باید با دستورات شرطی حالت دریافت و ارسال را از هم متمایز کنید که نوشتن این کد نیازمند آشنایی در حد متوسط به بالا با PHP است (به نظر باید بیشتر آموزش های مقدماتی JavaScript, Ajax و PHP را مرور کنید تا درک روشن تری از موقعیت داشته باشید).
paged صفحه 1 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...