شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)

ajax-code

همانطور که در بخش آموزش های مقدماتی ای جکس (Ajax) اشاره شد، یکی از کاربردهای استفاده از این تکنیک در صفحات وب رد و بدل کردن اطلاعات بین مرورگر و سرور بدون نیاز به رفرش صفحه است، به عبارتی تمام فعل و انفعالات در پس زمینه انجام شده و در سمت کاربر (مرورگر) تقریبا جزء نمایش نتایج اتفاق خاصی رخ نمی دهد و کاربر در حالت معمول متوجه چگونگی این فرآیند نیز نمی شود و می تواند به ادامه پیمایش صفحه بپردازد که به این حالت در اصطلاح درخواست غیرهمزمان (Asynchronous) یا هم روند می گویند، در این مطلب نیز کدی کاربردی را قرار داده ایم که به کمک آن می توانیم به صورت غیرهمزمان پس از انتخاب گزینه ای از لیست باز شونده، تابعی جاوا اسکریپتی را در رویداد onchange اجرا کرده و درخواست مبتنی بر Ajax را به فایل PHP ارسال نمائیم، سپس نتیجه را از این فایل یا با اتصال به پایگاه داده MySQL دریافت کرده و در سمت کاربر به هر صورت که مورد نیاز برنامه باشد نمایش دهیم.

کد HTML و ای جکس (Ajax) سمت کاربر


پیشتر در بخش آموزش های مقدماتی Ajax گفتیم که برای ارسال درخواست از صفحه مرورگر (سمت کاربر) به فایل PHP (سمت سرور) ابتدا نیاز به کدهای HTML، دستورات جاوا اسکریپت و متدهای Ajax است، هرچند درخواست Ajax را می توان به صورت مستقیم نیز تنظیم کرد اما کدهای HTML سمت کاربر معمولا شامل عناصری مانند تگ های زیرمجموعه فرم (select, input و...) یا لینک ها هستند که با انتخاب یک گزینه توسط کاربر، یک تابع در جاوا اسکریپت فراخوانی و با اجرای تابع درخواست بر بستر Ajax شکل گرفته و به سرور ارسال می شود، در زیر یک نمونه از این دستورات را درج کرده ایم که مربوط به تگ select و رویداد onchange است:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش نتایج پرس و جو از دیتابیس با ای جکس</title>
<!-- Webgoo.ir -->
<script type="text/javascript">
function showList(str, id){
    var xmlHttp;
    if(str == ''){
        document.getElementById(id).innerHTML = '';
        return false;
    }
    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else{
        //IE6, IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            document.getElementById(id).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, 'show-text')">
<option value="">انتخاب یک کاربر</option>
<option value="user_1">کاربر 1</option>
<option value="user_2">کاربر 2</option>
<option value="user_3">کاربر 3</option>
</select>
</form>
<br>
<div id="show-text">پس از انتخاب یک کاربر، اندکی صبر نمائید تا پاسخ از سرور دریافت شود.</div>
</body>
</html>
توضیح:
- برای شروع تابع showList را نوشته ایم تا درخواست های Ajax را از کاربر گرفته و توسط این تابع مدیریت کنیم.
- در فرم HTML و تگ select، با رویداد onchange مقادیر انتخابی کاربر به همراه آی دی بلاک div را به تابع showList ارسال می کنیم.
- متد getElementById عنصر HTML را بر اساس آی دی آن انتخاب می کند که در اینجا بلاک div با آی دی فرضی show-text به عنوان آرگیومنت به تابع و در نتیجه به این متد داده شده، در کنار این متد از متد innerHTML برای مقداردهی به بلاک هدف استفاده می کنیم.
- متغیری که در درخواست ما مقادیرش به سرور فرستاده می شود q نام دارد (=getlist.php?q)، متد استفاده شده نیز GET است که پیش از این در آموزش های مقدماتی Ajax در خصوص آن صحبت کرده ایم.

کد PHP و دستورات MySQL سمت سرور


پس از نوشتن کدهای HTML، دستورات جاوا اسکریپت و Ajax، فایلی با نام فرضی getlist.php ایجاد و کدنویسی مورد نظر جهت دریافت درخواست ارسال شده با متد GET را در آن تنظیم می نمائیم، این کد نویسی می تواند به صورت استاتیک و بدون پایگاه داده یا به صورت داینامیک و به همراه پرس جو از پایگاه داده MySQL باشد که این موضوع بستگی به هدف و نیاز برنامه ما دارد، در نمونه کدهای زیر هر دو صورت جهت راهنمایی بیشتر درج شده.
نمونه کد PHP بدون دیتابیس:
<?php
@$user = $_GET['q'];
if($user == 'user_1'){
    echo '<table width="200" border="1">
  <tr>
    <th>کاربر یک</th>
    <td>نام کاربر یک</td>
  </tr>
</table>'
;
}
elseif($user == 'user_2'){
    echo '<table width="200" border="1">
  <tr>
    <th>کاربر دو</th>
    <td>نام کاربر دو</td>
  </tr>
</table>'
;
}
elseif($user == 'user_3'){
    echo '<table width="200" border="1">
  <tr>
    <th>کاربر سه</th>
    <td>نام کاربر سه</td>
  </tr>
</table>'
;
}
?>
توضیح:
- در فایل getlist.php درخواست ارسال شده از سمت کاربر با متد GET را پردازش می کنیم.
- در اینجا صرفا به دلیل جنبه آموزشی و ساده تر شدن کدنویسی از دستورات شرطی استفاده شده، قاعدتا همین کد را می توانیم با دستور switch و case نیز بنویسیم.
نمونه کد PHP و استفاده از دستورات MySQL:
<?php
@$user = $_GET['user'];
$conn = mysqli_connect("localhost", "username", "password", "dbname");
if(!$conn){
    echo "Error!: " . mysqli_connect_errno() . ' - ' . mysqli_connect_error();
    exit;
} else{
    $user = mysqli_real_escape_string($conn, $user);
    $result = mysqli_query($conn, "SELECT id, name FROM users WHERE user = $user LIMIT 1");
    //Error
    if(!$result){
        echo 'MySQL Error: ' . mysqli_error($conn);
        die('بروز خطا در اجرای پرس و جوی MySQL');
    } //Ok
    else{
        while ($row = mysqli_fetch_assoc($result)){
            echo '<table width="200" border="1">
            <tr>
            <th>کاربر '
. $row['id'] . '</th>
            <td>نام کاربری '
. $row['name'] . '</td>
            </tr>
            </table>'
;
        }
    }
}
mysqli_close($conn);
?>
توضیح:
- در نمونه کد بالا از اکستنشن mysqli به شیوه کدنویسی معمولی (شکلی یا Procedural) استفاده کرده ایم.
- نام جدول و ستون ها فرضی و صرفا جهت نمونه است.
پیش نمایش
دسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش
آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)
نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)
دیدگاه
more ۳۷ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
میثم
۰۱:۵۹ ۱۳۹۳/۰۳/۱۶
سلام خسته نباشید.
سوال:
فرضا ما صفحه ای داریم که توش دو تا جدول div داریم
صفحه php دیگری هم داریم که کار بررسی رو انجام میده
تغییرات و چاپ نتایج در فایل php در xmlhttp.respponseText
قرار میگیرن که ما بعدا توسط
document.getElementById(div1).innerHTML = xmlHttp.responseText; 
اون را داخل div1 قرار میدم
کل نتایج داخل div1 قرار میگیره
حالا بنده میخوام اگر فایل php دو تا echo داره یکیش در div 1 دیگری در div 2 قرار بگیره در حالت عادی همه نتایج فایل php در xmlHttp.responseText قرار میگیرن که نمیشه نتایج رو جدا جدا تفکیک کرد.
خلاصه: چطور میشه فایل php ما "دو خروجی متفاوت" رو در دو جای متفاوت چاپ کنه؟
(در ضمن بنده به html5 و css3 و php و js , jquery تسلط دارم، فقط یه اشاره کوچیک کنید که چطور میشه پاسخ ها رو تفکیک کرد ممنون میشم.)
باید با نحوه کار متد split در جاوا اسکریپت آشنا باشید، به این ترتیب می توان یک خروجی واحد را با کلید تجزیه (به فرض کاراکتر |) به چندین قسمت و در قالب آرایه تجزیه کرد و از هر قسمت به صورت مجزا استفاده نمود، به عبارت ساده تر خروجی را با علامت | از هم جدا کنید، سپس در سمت کاربر پاسخ Ajax را با split به آرایه تبدیل و از کلید و مقدار آرایه به هر صورتی که مایل بودید استفاده کنید.
مجید
۱۸:۲۱ ۱۳۹۲/۱۱/۲۷
سلام و با تشکر از مطالبتون
میخواستم بدونم ایا راهی هست که تابع آژاکسی رو به یه تابع کوچکتر تبدیل کنیم که دیگه نیاز به نوشتن مراحل تکراریش نباشه چون من در اسکریپتم تعداد زیادی درخواست آژاکس دارم که میخواستم خلاصه اش کنم
بله، می توانید بخش مربوط به شی XMLHttpRequest را در یک تابع جداگانه بنویسید و هر جا نیاز بود، متغیر را با مقادیر برگردانده شده با تابع تنظیم کنید، مثال:
<script type="text/javascript">
//تابع برای ایجاد شی ای جکسی
function setAjaxRequest(){
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
}
else{
//IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;

}
function sendAjaxRequest(){
//مقدار دهی متغیر با شی
var xmlHttp = setAjaxRequest();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
document.getElementById("showtxt").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET", "getlist.php?q=" + str, true);
xmlHttp.send();
}
</script>
امین
۱۷:۳۳ ۱۳۹۲/۱۱/۲۵
خیلیی ممنون به نظر خودمم اولی عالیه . بسیار آموزش های خوبی دارید ممنون ^_^ مخصوصا این که از کتابخونه های آماده استفاده نمیکنین :پی راستی میشه بیشتر از خاصیت های dom و xml در javascript بگین . اموزش های خیلی خوب فارسی فکر نکنم داشته باشیم یا حداقل من ندیدم :پی بازم ممنون .
مباحث مورد نظر باید در خلال آموزش های مقدماتی سایت منتشر شوند که این فرایندی زمانبر است.
امین
۱۳:۴۵ ۱۳۹۲/۱۱/۲۵
سلام خسته نباشید . تو درخواست های آژاکسی همیشه اسکرول میپره بالا . سرچ کردم اما با return false پیشنهاد داده شده بود یا این که اسکرول را برگردونیم پایین . اولی که کار نکرد ، برای همه ی توابع گذاشتم . دومی هم زیاد به نظرم جالب نیست . چی کار باید کرد ؟ :(
برای تغییر رفتار مرورگر چند راه وجود دارد:
- به جای علامت # از عبارت javascript:void استفاده کنید، به صورت نمونه زیر:
<a href="javascript:void(0)" onclick="function();">
- یا در انتهای فراخوانی تابع، عبارت return false را اضافه کنید:
<a href="#" onclick="function(); return false;">
- یا آی دی بلاک هر کاربر را به انتهای علامت # اضافه کنید:
<a href="#div-id" onclick="function();">
البته روش های بالا تفاوت هایی نیز با هم دارند، در روش اول در همه حال (چه جاوا اسکریپت فعال باشد یا خیر)، مرورگر موقعیت صفحه را تغییر نمی دهد، اما در روش دوم تنها زمانی موقعیت صفحه ثابت می ماند که جاوا اسکریپت در مرورگر کاربر فعال باشد و نهایتا در روش سوم مرورگر کاربر را به بلاکی که آی دی آن را مشخص کرده ایم هدایت می کند؛ در حالت عادی بهتر است روش اول را انتخاب کنید.
حمید
۱۶:۰۱ ۱۳۹۲/۱۱/۱۸
به نظرم (نتیجه ای که گرفتم):
پس با این حساب. باید در قسمت آخرین اخبار یا انجمن ها
و ... . نباید از ایجکس استفاده کرد چون حسابی ترافیک و کم میکنه و همینطور سرور و اشغال.
دلیلشم اینه که مثلا شما فرض کنید روزی 100 کاربر بازدید داشته باشیم بعدم بقول شما هر 5 دقیقه یه درخواست صورت بگیرد منهای بقیه درخواستهای ارسال شده و دریافت شده در صفحه، خودش به تنهایی کلی از قسمتهای سرور رو به خودش اختصاص میده و اصلا کار مفیدی نیست. در ضمن من 3 دقیقه رو مثال زدم و زمان زیادیست چه برسه به 5 دقیقه. اگر قرار بیشتر از 30 ثانیه باشه دیگه خود کاربر صفحه و رفرش میکنه.
البته این نظر من. (تازه اگه زمان موندن کاربرها هم کمتر از نیم ساعت باشه بازم زیاده)
ممنون بابت پاسخ گوییتون.
حمید
۲۰:۴۶ ۱۳۹۲/۱۱/۱۷
سلام. خداقوت
یه سوال دارم اگر با استفاده از این روش اطلاعات رو از دیتابیس دریافت کنیم اگر کاربری جاوا اسکریپتش غیر فعال باشه اونوقت باید چی کار کرد. (مثلا در آخرین اخبار از این روش استفاده کنیم)
بعد یه سوال دیگه دارم این کار در اشغال شدن سرور یا تو سرعت سایت تاثیر نداره؟ (مثلا هر 3 دقیقه قسمت آخرین اخبار رفرش بشه و یا در انجمن ها)
شما این کار رو توصیه میکنید؟
قاعدتا امکاناتی که مبتنی بر جاوا اسکریپت هستند، با غیرفعال شدن آن از کار می افتند، البته این موضوع در حال حاضر مخصوص استفاده از Ajax نیست، تقریبا بیشتر امکانات سمت کاربر وبسایت ها مبتنی بر جاوا اسکریپت طراحی شده اند و لذا کاربری که این امکان را غیرفعال می کند از مزایای آن محروم می شود (می توانید با استفاده از تگ noscript یک پیام هشدار به کاربر نشان دهید).
در مورد اینکه استفاده از Ajax چه تاثیری بر عملکرد سرور دارد، بستگی به میزان پارامتر ارسالی و دریافتی و همچنین بازه زمانی درخواست ها دارد، درخواست آژاکسی نیز مانند یک درخواست معمولی است ،منتها ترافیک کمتری از سرور اشغال می کند، لذا برای موارد جزئی و در فواصل زمانی بیشتر از یک دقیقه معمولا اختلالی ایجاد نمی شود (البته باید سعی کنید یک توازن منطقی بین قدرت سرور و میزان درخواست ها ایجاد شود)، همچنین هر چه پردازش ها به دیتابیس کمتر وابسته باشند، سرعت بهتری خواهید داشت، اما در کل توصیه می کنیم در استفاده از Ajax صرفا به موارد ضروری بسنده شود، به طور مثال برای بخش اخبار اگر هم می خواهید رفرش صورت گیرد، بازه زمانی را بیش از 5 دقیقه در نظر بگیرید (باز بستگی به قدرت سرور و تعداد کاربران دارد).
محمدسعید
۱۳:۴۰ ۱۳۹۲/۰۹/۲۴
با سلام
من خواستم از همین دو نمونه کد در سایتم استفاده کنم اما نشد
من ابتدا با کد دومی که دادین فایل getlist.php را ایجاد کردم
هم تو قالبم تست کردم و گذاشتم و هم توی public_html گذاشتم و تست کردم
و پس از آن کد اولی را در قالبم قرار دادم
وقتی در سایتم روی گزینه ها کلیک می کنم هیچ چیز نشان داده نمی شود و هیچ تغییری جز محو شدن جمله ی (پس از انتخاب یک کاربر، اندکی صبر نمائید...) نیز نمی بینم.
خیلی ممنون میشم راهنمایی کنید. باتشکر از سایت فوق العاده شما و عرض خسته نباشید
لطفا آدرس سایت یا صفحه مورد نظر را درج کنید، حل مشکل بدون بررسی سورس کدها امکانپذیر نیست!
رضا
۲۱:۱۴ ۱۳۹۲/۰۸/۰۹
من یه سایت مجازی رو سیستمم دارم با این ادرس
http://127.0.0.1:8888/login.php
تمام سایت من همین صفحه است حالا کدهای اژاکس رو در قسمت head می نویسم و میخوام با یه دکمه تو همین صفحه اتفاق بیفته ولی نمی دونم url مربوط به تابع open رو چی قرار بدم. ایا باید صفحه ای جداگانه بسازم یا راهی برای این ارتباط هست. با تشکر
در پاسخ قبلی گفته شده، چنین حالتی توصیه نمی شود، بهتر است ارسال و دریافت درخواست در دو فایل جداگانه باشد، در غیر این صورت (اگر فایل یکی باشد) باید با دستورات شرطی حالت دریافت و ارسال را از هم متمایز کنید که نوشتن این کد نیازمند آشنایی در حد متوسط به بالا با PHP است (به نظر باید بیشتر آموزش های مقدماتی JavaScript, Ajax و PHP را مرور کنید تا درک روشن تری از موقعیت داشته باشید).
رضا
۱۵:۵۱ ۱۳۹۲/۰۸/۰۹
خیلی توضیح کاملی بود فقط من متوجه تابع open نشدم پارامتر دومش که یه لینک هست اگه کدهای php و javascript در یک صفحه باشن به چه ترتیب میشه
چنین حالتی توصیه نمی شود، در صورتی که چاره دیگری نبود، باید با دستورات شرطی (if، else و...) و متد GET یا POST حالت پاسخ و درخواست را از هم جدا کنید تا با مشکل روبرو نشوید (نیازمند آشنایی در حد متوسط به بالا با PHP است).
نفس
۱۸:۱۸ ۱۳۹۲/۰۸/۰۳
سلام و خدا قوت. میشه کاری کرد که اطلاعات رو از پایگاه داده بگیره؟ مثلا جدولی که نام استان ها به همراه پیش شماره اون استان ها هست. و کاربر اگر از لیست باکس نام استان رو انتخاب کنه کد استان براش به نمایش در بیاد
قاعدتا چنین کاری امکانپذیر است، Ajax صرفا یک روش جایگزین برای حالت عادی است، لذا می توانید در بستر آن یک درخواست به سرور (فایل PHP) ارسال کنید، در کدهای PHP به MySQL متصل شده و متناسب با آن، هر خروجی که بخواهید را به عنوان پاسخ برگردانید، به طور مثال در کدهای آموزش داده شده از خروجی بدون دیتابیس استفاده شده که به راحتی می توان مشابه آن را با دیتابیس نیز ساخت (سخت یا آسان بودن نوشتن این سیستم به میزان آشنایی شما با PHP، MySQL و JavaScript برمی گردد).
۱۹:۴۶ ۱۳۹۲/۰۷/۲۵
دم شما گرم دقیقا چیزی بود که دنبالش میگشتم
استفاده در Select ها
sajjad
۰۱:۰۲ ۱۳۹۲/۰۶/۱۳
سلام - خیلی خیلی خیلی ممنون از لطفتون بابت این آموزش .
۱۶:۴۲ ۱۳۹۲/۰۵/۳۰
سلام
من می خواهم اطلاعات وارد شده از طریق فرم ثبت املاک را در یک سایت املاک بدون اینکه فرد در صفحه ی اصلی رفرش کند ببیند
یعنی اگر یک ملک در پایگاه داده یک سایت ثبت شد کاربران انلاین در صفحه ی اصلی بدون استفاده از بارگذاری مجدد ان اطلاعات را مشاهده نمایند
از کدام توابع اژاکس شما استفاده کنم تا این امکان برای من محقق شود با تشکر
نیاز شما صرفا با استفاده از یک تابع رفع نمی شود!
بخشی از کدها به ای جکس مربوط می شود که آن ارسال درخواست و دریافت پاسخ از سرور است (آموزش حاضر و موارد مشابه)، بخش دیگر مربوط به فراخوانی نتایج از پایگاه داده و در واقع استفاده از PHP و MySQL است که باید به آموزش های مرتبط با آن (و ترجیحا شروع از آموزش های مقدماتی) مراجعه کنید.
مازیار
۲۱:۱۰ ۱۳۹۱/۱۲/۲۳
ممنون از توضیحتان
ولی محتوای این دو باکس متفاوت است در صورتی که منبع فراخوانی یک فایل php است به زبان ساده 2 فایل php باید فراخوانی شود و محتوای هر فایل در یک باکس نمایش داده شود در این مورد باید چه کار انجام دهم
در این صورت باید برای هر فایل یک کد مجزا تعریف کنید و نام توابع در هر کد به صورت یکتا باشند تا از تداخل جلوگیری شود، به فرض این کار را در نمونه کدی که آدرس آن را قرار داده اید به صورت افزودن یک شماره متناظر به هر قسمت که نیاز است انجام داده ایم، برای باکس دیگر، این شماره ها را یک مقدار افزایش دهید، بلاک div هم باید آی دی متناظر با آنچه در تابع تنظیم شده است را داشته باشد، یعنی هر بلاک باید یک آی دی یکتا داشته باشد.
مازیار
۱۴:۴۸ ۱۳۹۱/۱۲/۲۳
سلام
متاسفانه موفق نشدم ویرایش را به درستی انجام بدم اگه ممکنه لطف کنید یک لینک گذاشتم که نمونه کد درون ان قرار دارد ممنون می شوم تغییرات را اعمال کنید فرم برای ذخیره هم دارد لطفا بعد از ویرایش submit کنید که ذخیره بشه برام
پیشاپیش از لطف شما سپاسگذارم
ظاهرا منظورتان این است که یک نتیجه را در دو قسمت به صورت زنده نمایش دهید، این کار با آنچه توضیح دادیم متفاوت است و البته چون شما در مطلب کنونی مشکل خود را مطرح کرده اید، تصور ما بر همین مطلب بود، به هر صورت برای مورد شما کافی است در هنگام چاپ خروجی از آی دی دو بلاک متفاوت در دو دستور استفاده کنید تا مقادیر در دو div مختلف خروجی داده شوند.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
7 × 7
20 × 20
=