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

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

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)
ساخت قابلیت امتیازدهی با PHP و Ajax
لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
آموزش نحوه آپلود فایل با PHP و ای جکس (Ajax)

دیدگاه

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

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

جومونگ

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

سلام من می خواهم کد را جوری تغییر بدم که کاربر به جای کلیک روی تگ دکمه روی تگ span کلیک کنه و دقیقا همین اتفاق ها بیفتد. اما گذاشتن رویداد onclick روی تگ span جواب نداد. لطفا مرا راهنمایی کنید.

در تئوری هیچ مشکلی برای این کار نیست، لذا مشکل از نحوه استفاده یا به فرض در نظر نگرفتن استایل مناسب برای تگ span است که فضای قابل کلیک را شامل شود (نیاز به بررسی نمونه کد است).

الیاس

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

سلام
من می خوام در فرم از شی select-multiple استفاده کنم
ولی فقط یکیش رو ارسال می کنه
کد زیر رو براش نوشتم

case "select-multiple":
str += formobj.elements[i].name +
 "=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
            break;

سلام
برای انتخاب مقادیر چندگانه باید از حلقه for استفاده کنید:

case "select-multiple":
			str += formobj.elements[i].name + "=";
			for(var m = 0; m < formobj.elements[i].length; m++){
				if(formobj.elements[i].options[m].selected){
					str += formobj.elements[i].options[m].value + "|";
				}
			}
			str += "&";
            break;

توجه کنید که مقادیر به صورت فرضی param=1|2|3 ارسال می شود، یعنی در سرور باید مقادیر پارامتر را با توابعی مانند explode تجزیه و به آرایه تبدیل کنید.

negar

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

سلام . ممنون از سایت مفیدتون
من یک صفحه گذاشتم که کاربر با استفاده از لیست باکس انتخاب میکنه اطلاعات مربوط به کدام قسمت را میخواد مشاهده کنه که زیر انتخابش نتیجه را میبینه (با آژاکس) حالا من میخوام وقتی روی هر کدام از اطلاعات که کلیک میکنه بتونه قسمت پایین همین صفحه ادیت کنه (با آژاکس) اما وقتی دکمه ویرایش را میزنم به صفحه اول برمی گرده (صفحه انتخاب از لیست باکس) لطفا راهنماییم کنید

مشکلتان با صرف توضیحات قابل حل نیست، باید فایل ها را به صورت ZIP به ایمیل ما (موجود در بخش تماس) به همراه توضیحات ارسال کنید تا دقیقا بتوانیم بررسی کنیم.

meysam

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

سلام
از لطفتون ممنونم
مشکلم حل شد
موفق باشید

mojtaba

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

سلام ..
من با رویداد onchange یک مقدار ارسال می کنم که جواب هم می گیرم ولی وقتی میخوام دو مقدار ارسال کنم ، مقدار دوم نمیدونم چطوری باید ارسال کنم، دستور زیر امتحان کردم ولی مقدار دریافت نکردم

var idnewes = document.getelementbyid('idnews').value

سوالتان واضح نیست! دو مقدار را از چه طریق ارسال می کنید؟!
کدی که نوشتید صرفا مقادیر value را از تگ input با آی دی تعیین شده دریافت می کند و کار بیشتری انجام نمی دهد!

الیاس

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

من از رویداد onsubmit تست کرده بودم جواب نمی داد

"جواب نمیداد" دلیل بر امکانپذیر نبودن نیست! احتمالا در کدنویسی یا روش شما خطا یا اشتباهی وجود دارد.

الیاس

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

سلام
من یه فرم درست کردم با html 5 و با خصوصیات خود 5html اعتبار سنجی کردم و می خوام فرمم آژاکس هم باشه ولی اعتبار سنجی با html 5 دکمه ای از نوع submit نیاز داره ولی آژاکس نیاز به button داره

<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'ajax-post-form.php');" />

الان مجبورم یا قید آژاکس رو بزنم یا قید اعتبار سنجی با html
میشه راهنمایی کنید.

می توانید تابع Ajax خود را در رویداد onsubmit و در تگ form فراخوانی کنید، اجباری به استفاده از button نیست (لطفا در این رابطه در وب جستجو کنید).

علی

۲۳:۴۵ ۱۳۹۲/۱۱/۱۳

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

حذف شد

کد از نظر Ajax مشکلی ندارد، امکان دارد مورد از آی دی در نظر گرفته شده برای بلاک خروجی یا مواردی دیگر باشد (باید به همراه فایل ajax.php و کدهای کامل صفحه تست شود).

مهران

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

سلام در بالا برای حل مشکل ارسال فیلد ها پسورد و هیدن گفته شد باید از دو کیس زیر استفاده بشه یعنی:

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;

ولی وقتی از این کیس ها استفاده کردم اتفاقی نیفتاده و باز فیلد پسور ارسال نمیشه

دستورات تست شده و مشکلی ندارد، به احتمال قوی اشتباهی در قرار دادن یا استفاده از کد کرده اید.

komeil

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

سلام
اگه بخوايم مقاديري كه توسط فيلد file ارسال ميشه رو هم اضافه كنيم چه بايد بكنيم؟

سلام
در حال حاضر آپلود فایل با Ajax عملا خیلی متصور نیست، باید از روش های جایگزین (مانند iframe) یا از فریم ورک جی کئوری برای این منظور استفاده کنید که به سادگی حالت معمول نیست.

masiha68

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

بازم فرقی نکرد
من textarea رو به یه ادیتور تبدیل کردم (با استفاده از ادیتور ها) و الان هیچی نمی فرسته
تموم مقادیر ارسال میشه غیر از اون ادیتور
راستی من اگه نخوام کاراکترهای مزاحم رو حذف کنم باید کجا رو ویرایش کنم چون خودم قبل از فرستادن مقادیر به دیتابیس مقادیر رو escape می کنم
ممنون میشم زودتر جواب بدین چون روی این تیکه کد خیلی حساب وا کردم

ادیتورهای WYSIWYG در واقع از textarea و به روش معمول استفاده نمی کنند، بلکه بدون اینکه متوجه شوید از تگ های درونی خود (مانند iframe یا ContentEditable div و...) برای نمایش ادیتور و مدیریت مقادیر بهره می برند، به عبارتی برای استفاده از ای جکس در این نوع ویرایشگرها باید به راهنمای آنها مراجعه، دستورالعمل و API مخصوص در این زمینه را (در صورت وجود) مطالعه کنید.
در مورد escape مقادیر، در حالت فعلی هیچ تغییری در مقادیر ایجاد نمی شود، مگر اینکه این مورد را اضافه کنید.

masiha68

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

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

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

case "textarea":
str += formobj.elements[i].name +
"=" + formobj.elements[i].value + "&";
break;

نکته: استفاده از ای جکس برای ارسال مقادیر از textarea به دلیل احتمال وجود کاراکترهای مشکل ساز (مانند &، = و...)، توصیه نمی شود، مگر اینکه با جاوا اسکریپت آشنایی نسبی داشته باشید و بتوانید مشکلات مربوط به این نوع کاراکترها را مدیریت کنید.

امین

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

با سلام
تو این فرم ها توی فیلد اگه & بنویسیم باقی کاراکتر هارو نشون نمیده چیکار میشه کرد باقیشو هم نشون بده؟

برای escape از تابع encodeURI استفاده کرده ایم که این تابع کاراکترهای زیر را تغییر نمی دهد:

~!@#$&*()=:/,;?+'

لذا در صورت نیاز می توان از متدها و توابع دیگری نیز استفاده کرد.
- متد replace، مثال:

encodeURI(formobj.elements[i].value.replace(/&/g, "&amp;"))

- تابع escape، مثال:

escape(formobj.elements[i].value)

نکته: این تابع کاراکترهای @*/+ را ایمن سازی نمی کند.
- تابع encodeURIComponent، مثال:

encodeURIComponent(formobj.elements[i].value)

نکته: این تابع کاراکترهای ~!*()' را ایمن سازی نمی کند.

الیاس

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

راستی من از ترکیب این کد و کد ایجاد صفحه لوگین سایت شما استفاده کردم

الیاس

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

سلام
من از این کد در بخش ورودی کاریر به پنل مدیریت استفاده کردم ولی
اطلاعات رو به سرور ارسال می کنه و باسخ رو در 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;
	}
}

صفحه 2 از 3

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