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

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

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 ذخیره و در کنار فایل قبلی (کدهای سمت کاربر) قرار دهید، با درک این ساختار ساده به راحتی می توانیم در برنامه های کاربردی و پیچیده تر موارد دلخواه خود را ایجاد و کد را سفارشی سازی کنیم.
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» ساخت قابلیت امتیازدهی با PHP و Ajax
» نمایش داینامیک و صفحه به صفحه مطالب با آژاکس
» نمایش نتایج پایگاه داده MySQL با PHP و ای جکس (Ajax)
» لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql
» اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
commentنظرات (۳۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: yeki
زمان: ۲۲:۳۱:۵۵ - تاریخ: ۱۳۹۱/۰۶/۱۱
سلام. خواستم بپرسم این اطلاعات به کجا فرستاده میشه.
پاسخ: 
همان طور که در آموزش عنوان شده، اطلاعات به فایل ajax-post-form.php ارسال و پاسخ دریافتی در بلاک div با id فرضی show-result نشان داده می شود.
نویسنده: mohammad
زمان: ۰۰:۳۳:۱۲ - تاریخ: ۱۳۹۱/۰۶/۲۷
با سلام و تشکر از مطالب مفیدتون
این فرم داده های فارسی رو به درستی ارسال نمیکنه.
باید چه تغییری در کد بدیم؟
پاسخ: 
مشکل سازگاری فرم با حروف فارسی حل شد، این مشکل به دلیل استفاده کردن از تابع escape رخ داده بود که با جایگزینی تابع encodeURI به جای آن برطرف و آموزش به طور کامل اصلاح گردید.
نویسنده: هادی
زمان: ۲۱:۱۰:۰۰ - تاریخ: ۱۳۹۱/۱۱/۰۹
با سلام
اگه بخواهیم با این فرم فایل ارسال کنیم، چه تغییری باید در کد بدیم؟
ممنون از سایت خوبتون
پاسخ: 
مبحث ارسال فایل یا در واقع آپلود فایل به صورت ای جکس با آموزش فعلی متفاوت است، برای کسب اطلاعات بیشتر از قسمت آموزش های کاربردی ای جکس، مطلب آموزش نحوه آپلود فایل با PHP و ای جکس را مطالعه کنید.
نویسنده: ali
زمان: ۰۱:۲۳:۳۲ - تاریخ: ۱۳۹۱/۱۲/۰۹
با سلام دوست عزیز من یه کد به کمک تابع imagecreate نوشتم که با ارسال اطلاعات چند تا فرم یک عکس می کشد و نمایش میدهد ولی وقتی با آژاکس فرم ها را می فرستم به جای عکس یکسری تکس بی معنی می آید من خلی تو اینترنت سرچ کردم ولی به جایی نرسیدم ممنون میشم اگر کمکم کنید. لازم به ذکره که اگر به جای عکس اطلاعات دیگری بگذارم نوشته ها درست می آید فقط وقتی
imagejpeg($image);
را استفاده می کنم کد های بی معنی می آید.
پاسخ: 
ای جکس از انتقال و نمایش تصاویر پشتیبانی نمی کند، باید روش نمایش تصویر را تغییر دهید و به جای ارسال کل عکس، ابتدا آن را در یک دایرکتوری در سرور ذخیره کرده و سپس تنها نام یا آدرس فایل را به عنوان خروجی به درخواست ای جکس تحویل دهید، در گام بعدی در سمت کاربر کد شما باید مقادیر دریافتی را به صورت داینامیک تجزیه کرده و در مرورگر چاپ کند.
این راه حل کار در تئوری است.
نویسنده: ali
زمان: ۱۸:۵۵:۴۲ - تاریخ: ۱۳۹۱/۱۲/۰۹
با سلام مجدد
دوست عزیز مگه این کد همین کار را نمی کند. من آژاکس را تازه دارم یاد میگیرم در تحلیلش ضعیف هستم. این کد که ضاهرا کد امنیتی تولید می کند و ارسال می کند اینطور نیست
http://webcheatsheet.com/PHP/create_captcha_protection.php
پاسخ: 
خیر، این کد دقیقا از همان روشی استفاده می کند که در پاسخ قبلی گفته شد، اگر دقت کنید، متوجه می شوید که پاسخ درخواست ای جکس که در receiveReq.responseText وجود دارد همان متن Test successful است که توسط فایل captcha.php خروجی داده می شود (یعنی خروجی درخواست ای جکس تنها متن است)، سپس فایل create_image.php در سمت کاربر (توسط کدهای جاوا اسکریپت داخل فایل ajax_captcha.js) فراخوانی می شود و تصویر در مرورگر ظاهر می گردد.
نویسنده: ali
زمان: ۲۱:۴۸:۳۹ - تاریخ: ۱۳۹۱/۱۲/۰۹
ممنون از راهنماییت
ظاهرا باید بیخیال استفاده از اژاکس بشم!!!
ایا راهی هست که تا لود شدن کامل صفحه یه عکس نمایش دهد و پس از لود کامل صفحه صفحه جدید نمایش داده شود کد جاوا این کار را دارم اما در زمان نمایش ارتباطی به لود صفحه ندارد و بعد از زمان مشخصی صفحه را حتی اگر کامل لود نشده باشد نمایش میدهد اما من می خواهم تا صفحه کامل لود نشده عکس یا پیام را نمایش بده
پاسخ: 
در مورد Captcha استفاده از تصاویر GD توصیه نمی شود، تجربه ما نشان می دهد که نوشته های داخل این تصاویر قابل خواندن توسط برخی ربات های ارسال هرزنامه است، بهتر است از روش های ساده تر اما کاربردی مانند نمایش جمع و ضرب اعداد و... استفاده کنید.
در مورد نمایش پیام صفحه در حال بارگذاری مطلبی در سایت وجود دارد، در قسمت جستجوی سایت عبارت "بارگذاری" را وارد کنید.
نویسنده: محمد
زمان: ۰۱:۰۷:۳۸ - تاریخ: ۱۳۹۲/۰۱/۲۸
واقعا لذت بردم متشکرم بخاطر این مطلب مفید همیشه پاینده باشی
نویسنده: محمد
زمان: ۱۶:۱۰:۱۶ - تاریخ: ۱۳۹۲/۰۱/۲۹
با سلام و تشکر از مطلب مفیدتون
وقتی من با این فرم نوع پسورد و یا هیدن رو ارسال میکنم بخوبی عمل نمیکنه و یا بهتره بگم هیچ مقداری از این طریق ارسال نمیشه لطفا کمک کنید
پاسخ: 
کافی است در تابع 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;
نویسنده: 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;
نویسنده: امیر
زمان: ۱۳:۰۱:۱۲ - تاریخ: ۱۳۹۲/۰۳/۲۰
با سلام
چطوری میشه از این عملیات تو یه صفحه دو تا استفاده کرد (دو تا فرم جدا باشه)
وقتی دو تا با هم میذارم قاطی میشه
پاسخ: 
باید قسمت هایی که بین فرم های مختلف متفاوت هستند (مانند فایل مقصد درخواست، بلاکی که نتایج در آن نمایش داده می شود و...) را به صورت یکتا تعریف کنید، به طور مثال در هنگام فراخوانی تابع با رویداد onclick، آرگومان دوم آدرس فایل PHP را مشخص می کند، یا متغیر div در کدهای جاوا اسکریپت بر روی showresult تنظیم شده، برای چند فرم باید این مورد را هم با توجه به آرگومان تابع (آدرس فایل مقصد) در یک دستور شرطی if و else تغییر دهید.
نویسنده: الیاس
زمان: ۲۳:۱۲:۱۴ - تاریخ: ۱۳۹۲/۰۳/۲۳
سلام
من از این کد در بخش ورودی کاریر به پنل مدیریت استفاده کردم ولی
اطلاعات رو به سرور ارسال می کنه و باسخ رو در div
id="showresult"
بر می گرداند ولی موقعی که کاربر رمز رو درست می زنه من دیگه نمی خواهم پاسخ در
div id="showresult"
نمایش داده بشه می خواهم به صفحه مدیریت بره
×××
از دستور header برای هدایت به صفحه مدیریت استفاده کردم ولی این صفحه رو هم در
div id="showresult"
نمایش می دهد
پاسخ: 
برای این کار نباید از دستورات header در PHP استفاده کنید، چون در حال حاضر ای جکس قابلیت پردازش این دستورات را ندارد، راه حل این است که به فرض اگر رمز صحیح بود، در پاسخ عدد 1 (یا هر عبارت دلخواه دیگر) را برگردانید و سپس در تابع جاوا اسکریپتی، پاسخ سرور را تحلیل کنید، اگر برابر 1 بود، با استفاده از دستور
window.location.href
کاربر را به آدرس صفحه مدیریت هدایت کنید. مثال:
if(xmlHttp.readyState == 4){
var response = xmlHttp.responseText;
if(response == 1){
window.location.href = "http://آدرس صفحه مدیریت";
}
else{
document.getElementById(div).innerHTML = xmlHttp.responseText;
}
}
نویسنده: الیاس
زمان: ۲۳:۱۳:۴۶ - تاریخ: ۱۳۹۲/۰۳/۲۳
راستی من از ترکیب این کد و کد ایجاد صفحه لوگین سایت شما استفاده کردم
نویسنده: امین
زمان: ۱۷:۱۱:۵۹ - تاریخ: ۱۳۹۲/۰۴/۱۷
با سلام
تو این فرم ها توی فیلد اگه & بنویسیم باقی کاراکتر هارو نشون نمیده چیکار میشه کرد باقیشو هم نشون بده؟
پاسخ: 
برای escape از تابع encodeURI استفاده کرده ایم که این تابع کاراکترهای زیر را تغییر نمی دهد:
~!@#$&*()=:/,;?+'
لذا در صورت نیاز می توان از متدها و توابع دیگری نیز استفاده کرد.
- متد replace، مثال:
encodeURI(formobj.elements[i].value.replace(/&/g, "&amp;"))
- تابع escape، مثال:
escape(formobj.elements[i].value)
نکته: این تابع کاراکترهای @*/+ را ایمن سازی نمی کند.
- تابع encodeURIComponent، مثال:
encodeURIComponent(formobj.elements[i].value)
نکته: این تابع کاراکترهای ~!*()' را ایمن سازی نمی کند.
نویسنده: masiha68
زمان: ۱۷:۳۱:۳۲ - تاریخ: ۱۳۹۲/۰۶/۲۹
سلام
کد جالبیه فقط وقتی از یه ادیتور واسه تکست اریا استفاده میشه اطلاعات ارسال نمیشه (فقط اطلاعات ادیتور)
ممنون میشم راهنمایی کنید
پاسخ: 
برای textarea می توانید case زیر را اضافه کنید:
case "textarea":
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
break;
نکته: استفاده از ای جکس برای ارسال مقادیر از textarea به دلیل احتمال وجود کاراکترهای مشکل ساز (مانند &، = و...)، توصیه نمی شود، مگر اینکه با جاوا اسکریپت آشنایی نسبی داشته باشید و بتوانید مشکلات مربوط به این نوع کاراکترها را مدیریت کنید.
نویسنده: masiha68
زمان: ۱۶:۱۳:۵۳ - تاریخ: ۱۳۹۲/۰۶/۳۰
بازم فرقی نکرد
من textarea رو به یه ادیتور تبدیل کردم (با استفاده از ادیتور ها) و الان هیچی نمی فرسته
تموم مقادیر ارسال میشه غیر از اون ادیتور
راستی من اگه نخوام کاراکترهای مزاحم رو حذف کنم باید کجا رو ویرایش کنم چون خودم قبل از فرستادن مقادیر به دیتابیس مقادیر رو escape می کنم
ممنون میشم زودتر جواب بدین چون روی این تیکه کد خیلی حساب وا کردم
پاسخ: 
ادیتورهای WYSIWYG در واقع از textarea و به روش معمول استفاده نمی کنند، بلکه بدون اینکه متوجه شوید از تگ های درونی خود (مانند iframe یا ContentEditable div و...) برای نمایش ادیتور و مدیریت مقادیر بهره می برند، به عبارتی برای استفاده از ای جکس در این نوع ویرایشگرها باید به راهنمای آنها مراجعه، دستورالعمل و API مخصوص در این زمینه را (در صورت وجود) مطالعه کنید.
در مورد escape مقادیر، در حالت فعلی هیچ تغییری در مقادیر ایجاد نمی شود، مگر اینکه این مورد را اضافه کنید.
paged صفحه 1 از 3




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

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

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

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

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