parsgreen.com
article

ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)

ajax

در آموزش های مقدماتی آژاکس (ajax)، گفتیم که چگونه می توان اطلاعات یک فرم را با متد post برای یک فایل php ارسال کرد و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد، در این مطلب می خواهیم کمی از تئوری فاصله بگیریم و کدی کاربردی را قرار دهیم که به کمک آن بدون استفاده از کتابخانه های حجیم جی کئوری (jquery) و دردسرهایش، تنها بر مبنای آژاکس، اطلاعات یک فرم را به صورت پیشرفته ارسال کنیم و علاوه بر آن، حالت در حال پردازش یا loading را نیز با تصویر و متن نشان دهیم.

برای ارسال و دریافت اطلاعات از یک فرم html به توابعی نیاز داریم که علاوه بر روش های عادی ajax، بتوانیم پردازش و کنترل بیشتری بر روی فرایندها داشته باشیم؛ کد زیر نمونه تقریبا کاملی است.

فایل php جهت دریافت درخواست آژاکسی


با استفاده از کدهای php زیر، مقادیر ارسال شده از درخواست مبتنی بر آژاکس را دریافت و خروجی را به عنوان پاسخ، ارسال می کنیم.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$choose = $_POST['choose'];
$check = $_POST['check'];
echo "نام شما: $name <br />";
echo "پست الکترونیک شما: $email<br />";
echo "شماره انتخاب شده: $choose<br />";
echo "وضعیت تایید: $check<br />";
?>

کد html و تنظیمات آژاکسی


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد post و فرم html</title>
<!-- http://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">
//<![CDATA[
var div = 'showresult';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> لطفا کمی صبر کنید...';
function Ajaxrequest(){
    var xmlHttp;
    try{
        // Firefox, Opera 8.0+, Safari    
        xmlHttp=new XMLHttpRequest();
        return xmlHttp;
        }
        catch (e){
            try{
                // Internet Explorer    
                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 poststr = getFormValues(form);
    postData(url, poststr);
}
function postData(url, parameters){
    var xmlHttp = Ajaxrequest();
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(div).innerHTML=loadingmessage;
            }
            if (xmlHttp.readyState == 4) {
                document.getElementById(div).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(formobj)
{
    var str = "";
    var valueArr = null;
    var val = "";
    var cmd = "";
    for(var i = 0;i < formobj.elements.length;i++)
    {
        switch(formobj.elements[i].type)
        {
            case "text":
            str += formobj.elements[i].name +
            "=" + encodeURI(formobj.elements[i].value) + "&";
            break;
            case "textarea":
            str += formobj.elements[i].name +
            "=" + encodeURI(formobj.elements[i].value) + "&";
            break;
            case "select-one":
            str += formobj.elements[i].name +
            "=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
            break;
            case "checkbox":
            if(formobj.elements[i].checked == true){
                str += formobj.elements[i].name +
                "=" + formobj.elements[i].value + "&";
            }
            break;
            }
        }
str = str.substr(0,(str.length - 1));
return str;
}
//]]>
</script>
</head>
<body>
<form action="#">
<label for="name">نام: </label>
<input id="name" type="text" name="name" size="20" value="webgoo" />
<br /><br />
<label for="email">پست الکترونیک: </label>
<input id="email" type="text" name="email" size="20" value="info[at]webgoo.ir" />
<br /><br />
<label for="choose">انتخاب شماره: </label>
<select name="choose" id="choose">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br /><br />
<label for="check">تایید: </label>
<input type="checkbox" name="check" id="check" value="تایید شده" />
<br />
<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'ajax-post-form.php');" />
</form>
<div id="showresult"></div>
<hr />
اطلاعات فرم با استفاده از ترکیب آژاکس و جاوا اسکریپت به سرور ارسال می شوند.
</body>
</html>
پیش نمایش
توضیح:
- در کد بالا اطلاعات به فایلی به نام ajax-post-form.php ارسال و نتایج از آن دریافت می شود؛ در طی این فرایند متغیر loadingmessage در حالت بین صفر تا 4 از xmlHttp.readyState اجرا می شود و یک پیام مبنی بر در حال پردازش به همراه تصویر نشان داده می شود.
- تابع Ajaxrequest برای ارسال درخواست آژاکسی است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی به او مبنی بر پشتیبانی نکردن مرورگرش از آژاکس نشان داده خواهد شد.
- متدی که در کد اسفاده شده، متد post است.
- تابع getFormValues اطلاعات فرم را پردازش و در خود نگهداری می کند و در تابع formget مجددا به عنوان پارامتر در تابعی دیگر با نام postData و متغیر poststr ذخیره می شود که از آن در قسمت xmlHttp.send جهت ارسال اطلاعات استفاده می کنیم.
- برای سازگاری و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق آژاکس با زبان فارسی، از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را به صورت کاراکترهای استاندارد utf8 تبدیل می کند.
هر چند در نگاه اول ممکن است کمی پیچیده به نظر برسد، اما اگر از ابتدا و کم کم با جاوا اسکریپت و آژاکس آشنا شویم، خواهیم دید که آنقدر هم سخت نیست؛ از طرفی نیازی نیست که حتما تسلط کامل روی ajax داشته باشیم، همین که بتوانیم نحوه پردازش کدها و ایجاد تغییرات دلخواه را بیاموزیم، به نظر کافی است.
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql
» نمایش زنده آمار و اطلاعات با آژاکس (Ajax)
» نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)
» نمایش داینامیک و صفحه به صفحه مطالب با آژاکس
» آموزش نحوه آپلود فایل با php و آژاکس (ajax)
commentنظرات (۳۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: yeki
زمان: ۲۲:۳۱:۵۵ - تاریخ: ۱۳۹۱/۰۶/۱۱
سلام. خواستم بپرسم این اطلاعات به کجا فرستاده میشه.
پاسخ: 
سلام
همان طور که در آموزش عنوان شده، اطلاعات به فایل ajax-post-form.php ارسال و پاسخ دریافتی در بلاک div با id فرضی showresult نشان داده می شود.
نویسنده: 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

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