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

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

ارسال اطلاعات فرم با ای جکس (Ajax) و نمایش پیام در حال پردازش

در آموزش های مقدماتی ای جکس (Ajax) گفتیم که چگونه می توان اطلاعات یک فرم را با متد GET یا POST برای یک فایل PHP ارسال و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد که در واقع این فرآیند فلسفه پیدایش تکنیک Ajax است، در این مطلب می خواهیم کمی از تئوری فاصله گرفته و کدی کاربردی را قرار دهیم که به کمک آن بدون استفاده از کتابخانه هایی مانند جی کئوری (jQuery) و دردسرهایش، تنها بر مبنای ای جکس صرف (Pure Ajax) اطلاعات یک فرم HTML را به صورت پیشرفته ارسال و علاوه بر آن حالت در حال پردازش (loading یا processing) را نیز با تصویر و متن نمایش دهیم، به این ترتیب می توانیم در طراحی رابط کاربری (User Interface) صفحات وبی که مبتنی بر ای جکس هستند گام مثبتی برداشته و آخرین وضعیت پردازش درخواست را به اطلاع کاربر برسانیم.

کد HTML، دستورات CSS، JavaScript و Ajax

مانند آنچه در آموزش های مقدماتی دیدیم صفحات مبتنی بر تکنیک Ajax از سه قسمت کدهای سمت کاربر (کدهای HTML، CSS، JavaScript و...)، سمت سرور (برنامه نویسی به زبان PHP، ASP.NET و...) و رابط بین سمت کاربر و سمت سرور یعنی توابع Ajax تشکیل شده اند، از این رو برای ارسال و دریافت اطلاعات بین سمت کاربر و سمت سرور ابتدا باید بخش مربوط به کدنویسی HTML، CSS، JavaScript و Ajax را مشابه با نمونه کد زیر انجام دهیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ارسال اطلاعات فرم با ای جکس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
label{
    width:100px;
    display:inline-block;
}
</style>
<script type="text/javascript">
var div_id = 'show-result';
var loading_message = '<img src="loading.gif" alt="loading" height="16" width="16"> لطفا کمی صبر کنید...';

function ajaxRequest(){
    var xmlHttp;
    try{
        xmlHttp = new XMLHttpRequest();
        return xmlHttp;
    } catch (e){
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            return xmlHttp;
        } catch (e){
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                return xmlHttp;
            } catch (e){
                alert('مرورگر شما از ای جکس پشتیبانی نمی کند!');
                return false;
            }
        }
    }
}

function formGet(form, url){
    var post_str = getFormValues(form);
    //alert(post_str);
    postData(url, post_str);
}

function postData(url, parameters){
    var xmlHttp = ajaxRequest();
    
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(div_id).innerHTML = loading_message;
        }
        if(xmlHttp.readyState == 4){
            document.getElementById(div_id).innerHTML = xmlHttp.responseText;
        }
    }
    
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", parameters.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(parameters);
}

function getFormValues(form){
    var str = '';
    for(var i = 0;i < form.elements.length;i++){
        switch(form.elements[i].type){
            case 'text':
            str += form.elements[i].name +
            '=' + encodeURI(form.elements[i].value) + '&';
            break;
            case 'textarea':
            str += form.elements[i].name +
            '=' + encodeURI(form.elements[i].value) + '&';
            break;
            case 'select-one':
            str += form.elements[i].name +
            '=' + form.elements[i].options[form.elements[i].selectedIndex].value + '&';
            break;
            case 'checkbox':
            if(form.elements[i].checked == true){
                str += form.elements[i].name +
                '=' + form.elements[i].value + '&';
            } else{
                str += form.elements[i].name +
                '=' + '0' + '&';
            }
            break;
        }
    }
    str = str.substr(0, (str.length - 1));
    return str;
}
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
<br>
</noscript>
<form name="form-name" action="#">
<label for="name">نام: </label>
<input id="name" name="name" type="text" size="50" placeholder="نام خود را وارد کنید">
<br>
<br>
<label for="email">پست الکترونیک: </label>
<input id="email" name="email" type="text" size="50" placeholder="پست الکترونیک خود را وارد کنید">
<br>
<br>
<label for="number">انتخاب شماره: </label>
<select id="number" name="number">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label for="check">تایید: </label>
<input id="check" name="check" type="checkbox" value="1">
<br>
<br>
<input name="send" type="button" value="ارسال" onclick="formGet(this.form, 'ajax-post-form.php');">
</form>
<div id="show-result"></div>
<hr>
پس از کلیک بر روی دکمه ارسال، تابع جاوا اسکریپتی formGet اجرا شده و فرآیند درخواست ای جکس شروع می شود، در نهایت نتیجه در بلاک div با آی دی فرضی show-result نمایش داده خواهد شد، یکی از بخش های مهم این کد ارسال آبجکت فرم با تابع formGet و استفاده از آن در تابع getFormValues است، از این آبجکت برای دسترسی به زیرمجموعه های تگ form مورد نظر استفاده خواهیم کرد.
</body>
</html>

این کدها را در فایلی با نام دلخواه و پسوند html یا php ذخیره کنید.
توضیح:
- اولین تابعی که پس از کلیک بر روی دکمه ارسال فراخوانی می شود formGet است که دو آرگیومنت دارد، آرگیومنت اول آبجکت فرم و آرگیومنت دوم نام فایلی است که اطلاعات به آن ارسال خواهد شد.
- اطلاعات به فایلی در سرور با نام ajax-post-form.php ارسال و نتیجه از آن دریافت می شود، در طی این فرایند متغیر loading_message در حالتی که متد xmlHttp.readyState بین 0 تا 4 است در خروجی چاپ و پیامی مبنی بر در حال پردازش بودن درخواست ای جکس به همراه تصویر متحرک نشان داده می شود.
- تابع ajaxRequest برای ایجاد ساز و کار ارسال درخواست و دریافت پاسخ به شیوه ای جکس است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی مبنی بر پشتیبانی نکردن مرورگر از ای جکس نشان داده خواهد شد.
- متدی که در کد استفاده شده متد POST است، در خصوص تفاوت متد GET و POST در آموزش های مقدماتی صحبت کردیم، در اینجا نکته مهم این است که باید در سمت سرور نیز با متد POST پارامترها را دریافت کنیم.
- تابع getFormValues اطلاعات فیلدهای فرم را بر اساس نوع آنها دریافت و به عنوان نتیجه در نهایت به صورت یک رشته متنی برمی گرداند، این اطلاعات در تابع formGet به عنوان پارامتر در تابعی دیگر با نام postData و متغیر post_str استفاده می شوند که در نهایت از آن در قسمت xmlHttp.send جهت ارسال پارامترهای اطلاعاتی در قالب متد POST استفاده می کنیم، نمونه:

name=your-name&email=your@email.com&number=1&check=1

- برای سازگاری با یونیکد utf-8 (پشتیبانی از زبان فارسی) و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق ای جکس از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را جهت استفاده در درخواست ای جکس به صورت کاراکترهای استاندارد utf-8 تبدیل می کند.

دستورات PHP جهت دریافت و پردازش درخواست ای جکس

با استفاده از کدهای PHP زیر مقادیر ارسال شده از درخواست مبتنی بر ای جکس را دریافت، پردازش و خروجی را به عنوان پاسخ ارسال می کنیم، همان طور که مشخص است در این قسمت نیز از متد POST استفاده کرده ایم.

<?php
$name = @$_POST['name'];
$email = @$_POST['email'];
$number = @$_POST['number'];
$check = @$_POST['check'];

echo "نام شما: $name <br>";
echo "پست الکترونیک شما: $email <br>";
echo "شماره انتخاب شده: $number <br>";
echo "وضعیت تایید: $check <br>";
?>

پیش نمایش
این کدها را نیز در فایلی با نام ajax-post-form.php ذخیره و در کنار فایل قبلی (کدهای سمت کاربر) قرار دهید، با درک این ساختار ساده به راحتی می توانیم در برنامه های کاربردی و پیچیده تر موارد دلخواه خود را ایجاد و کد را سفارشی سازی کنیم.

دسته بندی: آموزش کاربردی » Ajax

برچسب ها: Ajax - PHP

قبلی »

« بعدی

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

دیدگاه

۴۰ دیدگاه برای این مطلب ارسال شده است.

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

امیر

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

با سلام
چطوری میشه از این عملیات تو یه صفحه دو تا استفاده کرد (دو تا فرم جدا باشه)
وقتی دو تا با هم میذارم قاطی میشه

باید قسمت هایی که بین فرم های مختلف متفاوت هستند (مانند فایل مقصد درخواست، بلاکی که نتایج در آن نمایش داده می شود و...) را به صورت یکتا تعریف کنید، به طور مثال در هنگام فراخوانی تابع با رویداد onclick، آرگومان دوم آدرس فایل PHP را مشخص می کند، یا متغیر div در کدهای جاوا اسکریپت بر روی showresult تنظیم شده، برای چند فرم باید این مورد را هم با توجه به آرگومان تابع (آدرس فایل مقصد) در یک دستور شرطی if و else تغییر دهید.

maryam

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

با سلام
من با ارسال radio button مشکل دارم.
قبل از خوندن مطلب شما فرمم رو بدون ajax به صفحه ی php ارسال کردم و مشکلی نداشت. ولی الان value مربوط به radio button ها ارسال نمیشه, بقیه مقادیر به درستی فرستاده میشه!
بازم ممنون از مطالبتون

کافی است به تابع getFormValues یک case جدید به صورت زیر اضافه کنید:

case "radio":
if(formobj.elements[i].checked == true){
	str += formobj.elements[i].name +
    "=" + formobj.elements[i].value + "&";
}
break;

محمد

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

با سلام و تشکر از مطلب مفیدتون
وقتی من با این فرم نوع پسورد و یا هیدن رو ارسال میکنم بخوبی عمل نمیکنه و یا بهتره بگم هیچ مقداری از این طریق ارسال نمیشه لطفا کمک کنید

کافی است در تابع getFormValues دو case زیر را در کنار سایر موارد اضافه کنید:

			case "hidden":
			str += formobj.elements[i].name +
			"=" +  encodeURI(formobj.elements[i].value) + "&";
			break;
			case "password":
			str += formobj.elements[i].name +
			"=" +  encodeURI(formobj.elements[i].value) + "&";
			break;

محمد

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

واقعا لذت بردم متشکرم بخاطر این مطلب مفید همیشه پاینده باشی

ali

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

ممنون از راهنماییت
ظاهرا باید بیخیال استفاده از اژاکس بشم!!!
ایا راهی هست که تا لود شدن کامل صفحه یه عکس نمایش دهد و پس از لود کامل صفحه صفحه جدید نمایش داده شود کد جاوا این کار را دارم اما در زمان نمایش ارتباطی به لود صفحه ندارد و بعد از زمان مشخصی صفحه را حتی اگر کامل لود نشده باشد نمایش میدهد اما من می خواهم تا صفحه کامل لود نشده عکس یا پیام را نمایش بده

در مورد Captcha استفاده از تصاویر GD توصیه نمی شود، تجربه ما نشان می دهد که نوشته های داخل این تصاویر قابل خواندن توسط برخی ربات های ارسال هرزنامه است، بهتر است از روش های ساده تر اما کاربردی مانند نمایش جمع و ضرب اعداد و... استفاده کنید.
در مورد نمایش پیام صفحه در حال بارگذاری مطلبی در سایت وجود دارد، در قسمت جستجوی سایت عبارت "بارگذاری" را وارد کنید.

ali

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

با سلام مجدد
دوست عزیز مگه این کد همین کار را نمی کند. من آژاکس را تازه دارم یاد میگیرم در تحلیلش ضعیف هستم. این کد که ضاهرا کد امنیتی تولید می کند و ارسال می کند اینطور نیست

http://webcheatsheet.com/PHP/create_captcha_protection.php

خیر، این کد دقیقا از همان روشی استفاده می کند که در پاسخ قبلی گفته شد، اگر دقت کنید، متوجه می شوید که پاسخ درخواست ای جکس که در receiveReq.responseText وجود دارد همان متن Test successful است که توسط فایل captcha.php خروجی داده می شود (یعنی خروجی درخواست ای جکس تنها متن است)، سپس فایل create_image.php در سمت کاربر (توسط کدهای جاوا اسکریپت داخل فایل ajax_captcha.js) فراخوانی می شود و تصویر در مرورگر ظاهر می گردد.

ali

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

با سلام دوست عزیز من یه کد به کمک تابع imagecreate نوشتم که با ارسال اطلاعات چند تا فرم یک عکس می کشد و نمایش میدهد ولی وقتی با آژاکس فرم ها را می فرستم به جای عکس یکسری تکس بی معنی می آید من خلی تو اینترنت سرچ کردم ولی به جایی نرسیدم ممنون میشم اگر کمکم کنید. لازم به ذکره که اگر به جای عکس اطلاعات دیگری بگذارم نوشته ها درست می آید فقط وقتی

imagejpeg($image);

را استفاده می کنم کد های بی معنی می آید.

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

هادی

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

با سلام
اگه بخواهیم با این فرم فایل ارسال کنیم، چه تغییری باید در کد بدیم؟
ممنون از سایت خوبتون

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

mohammad

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

با سلام و تشکر از مطالب مفیدتون
این فرم داده های فارسی رو به درستی ارسال نمیکنه.
باید چه تغییری در کد بدیم؟

مشکل سازگاری فرم با حروف فارسی حل شد، این مشکل به دلیل استفاده کردن از تابع escape رخ داده بود که با جایگزینی تابع encodeURI به جای آن برطرف و آموزش به طور کامل اصلاح گردید.

yeki

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

سلام. خواستم بپرسم این اطلاعات به کجا فرستاده میشه.

همان طور که در آموزش عنوان شده، اطلاعات به فایل ajax-post-form.php ارسال و پاسخ دریافتی در بلاک div با id فرضی show-result نشان داده می شود.

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

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