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

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

Saturday, September 13, 2025 GMT +3:30

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

همانطور که در بخش آموزش های مقدماتی ای جکس (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

برچسب ها: Ajax - PHP

قبلی »

« بعدی

مطالب بیشتر:
ساخت قابلیت امتیازدهی با PHP و Ajax
نمایش زنده آمار و اطلاعات با ای جکس (Ajax)
نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)
آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)
اعتبارسنجی همزمان فرم با ای جکس (Ajax) و PHP

دیدگاه

۳۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

مازیار

۰۹:۰۰ ۱۳۹۱/۱۲/۲۳

من کد شما را با یک تایمر ترکیب کردم و جواب داد هر 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) نوشته ایم، از روش بالا استفاده کرده و عنوان داینامیک را جایگزین می کنیم.
البته انجام صحیح تغییرات بالا تا حدود زیادی به آشنایی شما با جاوا اسکریپت بستگی دارد.

mary

۱۳:۰۴ ۱۳۹۱/۱۲/۰۸

سلام من کد شما رو استفاده کردم و جواب داد اما یه مشکل دارم اینکه با تغییر مقدار لیست کشویی ابتدا بدنه صفحه سایت تکرار شده و بعد داخل تکرار رکورد نمایش داده می شه
اگه امکان داره فوری جواب رو به ایمیل بفرستید باید فردا 10:30 پروژه رو تحویل بدم

فایل PHP مقصد که درخواست ای جکس به آن ارسال می شود باید تنها موارد مورد نیاز را چاپ کند نه چیز دیگری، به طور مثال از کدهای HTML نباید در آن فایل استفاده شده باشد، در غیر این صورت به همراه سایر موارد به عنوان خروجی، توسط کد ای جکس دریافت شده و در مرورگر نشان داده می شوند.

حبیب

۰۰:۲۹ ۱۳۹۱/۱۰/۱۸

با سلام در قسمت اچ تی ام ال کاربرد دو خط زیر چیه میشه توضیح بدین

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

ممنون

این کدها برای تعیین نوع سند و نسخه HTML صفحه مورد نظر کاربرد دارند، از آنجایی که HTML در نسخه های متفاوت ارائه شده و هر کدام کم و بیش با هم تفاوت هایی دارند، برای اینکه مرورگرها به درستی نسخه استفاده شده در صفحه وب را تشخیص دهند توصیه می شود که با کدهای استاندارد به سند DTD (یک استاندارد تعریف شده است) آن نسخه ارجاع داده شود.
برای کسب اطلاعات بیشتر لطفا عبارت "چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟ + وبگو" را در وب جستجو نمائید.

حبیب

۱۴:۵۰ ۱۳۹۱/۱۰/۰۷

با سلام آموزش افزودن رکورد در بانک اطلاعاتی توسط آژاکس رو می خواستم ممنون میشم

Ajax به تنهایی قابلیت کار با پایگاه داده را ندارد و باید در کنار یک زبان سمت سرور مانند PHP استفاده شود (Ajax فایل را از سرور فراخوانی می کند و دستورات در فایل PHP اجرا می شوند)، لذا برای این کار کافی است نحوه فراخوانی یک فایل با Ajax را فرا بگیرید (که در آموزش های مقدماتی توضیح داده شده) و در کنار آن نحوه کار با دستورات PHP و MySQL را هم بلد باشید (که این مورد هم در بخش آموزش های مقدماتی MySQL توضیح داده شده است).

صلاحی

۱۹:۰۲ ۱۳۹۱/۰۹/۲۶

واقعاً سایت خوبی دارید.
آموزش‌ها کاملاً کاربردی هستند و به درد من یکی خیلی خوردند.
با تشکر از مدیریت سایت و آرزوی موفقیت برای ایشان

ممنون از نظر لطف شما.

mohammad

۲۲:۵۰ ۱۳۹۱/۰۹/۲۵

تو سایت های خارجی هم گشتم نبود :(

باید سایتی پیدا کنید که از این افکت استفاده کرده باشد، سپس از نمونه کد های آن استفاده کنید.

mohammad

۱۸:۰۷ ۱۳۹۱/۰۹/۲۵

سلام یه کد آجاکس یا جی کوئری می خوام که هر بار گزینه "ادامه" رو زدیم یه باکس به اندازی مثلا 200px height بیشتر بشه و هر وقت که دکمه "بازگشت" را زدیم به حالت اولیه باز گرده.... می تونید همچین کدی رو در اختیار من بزارید؟ یه دنیا ممنون

نمونه کد مورد نظر شما از جی کئوری استفاده می کند، متاسفانه نمونه ای آماده در اختیار نداریم ولی اگر در وب جستجو کنید احتمالا مواردی وجود دارد.

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.