i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

نمایش نتایج پایگاه داده 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) استفاده کرده ایم.
- نام جدول و ستون ها فرضی و صرفا جهت نمونه است.
پیش نمایش
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» ساخت قابلیت امتیازدهی با PHP و Ajax
» نمایش زنده آمار و اطلاعات با آژاکس (Ajax)
» نمایش داینامیک و صفحه به صفحه مطالب با آژاکس
» لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql
» ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش
commentنظرات (۳۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: mohammad
زمان: ۱۸:۰۷:۴۷ - تاریخ: ۱۳۹۱/۰۹/۲۵
سلام یه کد آجاکس یا جی کوئری می خوام که هر بار گزینه "ادامه" رو زدیم یه باکس به اندازی مثلا 200px height بیشتر بشه و هر وقت که دکمه "بازگشت" را زدیم به حالت اولیه باز گرده.... می تونید همچین کدی رو در اختیار من بزارید؟ یه دنیا ممنون
پاسخ: 
نمونه کد مورد نظر شما از جی کئوری استفاده می کند، متاسفانه نمونه ای آماده در اختیار نداریم ولی اگر در وب جستجو کنید احتمالا مواردی وجود دارد.
نویسنده: mohammad
زمان: ۲۲:۵۰:۵۸ - تاریخ: ۱۳۹۱/۰۹/۲۵
تو سایت های خارجی هم گشتم نبود :(
پاسخ: 
باید سایتی پیدا کنید که از این افکت استفاده کرده باشد، سپس از نمونه کد های آن استفاده کنید.
نویسنده: صلاحی
زمان: ۱۹:۰۲:۱۰ - تاریخ: ۱۳۹۱/۰۹/۲۶
واقعاً سایت خوبی دارید.
آموزش‌ها کاملاً کاربردی هستند و به درد من یکی خیلی خوردند.
با تشکر از مدیریت سایت و آرزوی موفقیت برای ایشان
پاسخ: 
ممنون از نظر لطف شما.
نویسنده: حبیب
زمان: ۱۴:۵۰:۴۵ - تاریخ: ۱۳۹۱/۱۰/۰۷
با سلام آموزش افزودن رکورد در بانک اطلاعاتی توسط آژاکس رو می خواستم ممنون میشم
پاسخ: 
Ajax به تنهایی قابلیت کار با پایگاه داده را ندارد و باید در کنار یک زبان سمت سرور مانند PHP استفاده شود (Ajax فایل را از سرور فراخوانی می کند و دستورات در فایل PHP اجرا می شوند)، لذا برای این کار کافی است نحوه فراخوانی یک فایل با Ajax را فرا بگیرید (که در آموزش های مقدماتی توضیح داده شده) و در کنار آن نحوه کار با دستورات 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 3
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

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

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات