برای ارسال یک فرم به سرور با فناوری ایجکس روشها و کتابخانه های زیادی وجود داره که ما در این پست یکی از این روش هارو خدمتتون میگیم و اونهم کتابخانه ajax.form.js هست که میتونید آخرین نسخه اونو از سایت جی کوئری دانلود و به پروژه خودتون اضافه کنید ( من همین جا لینک دانلودش رو هم گذاشتم،میتونیددانلود کنید)
دانلود کتابخانه
عنوان: ajaxlibrary
حجم: 44.3 کیلوبایت
توضیحات : فایل های کتابخانه ایجکس برای ارسال فرم در php
...
بعد از اینکه فایل جاوا اسکریپتی کتابخانه موردنظر رو کنار فایلهای پروژه خودتون گذاشتید باید با استفاده از تگ <link> هر دو فایل رو به صفحه html خودتون لینک بدید حالا میتونید از متدها و فانکشن های داخل اون استفاده کنید ( برای اطلاع از فانکشن ها به مستندات کتابخونه ها در سایت مرجع مراجعه نمائید)
داخل کتابخونه ای که گفتیم متدی وجود داره بنام ajaxSubmit که از ما چند پارامتر میگیره و پارامترهاش هم توی همون سایت مربوطه توضیح داده شده و روش کار به اینصورت هست که ما بایستی با این متد کاری کنیم که وقتی کاربر بر روی دکمه ارسال فرم کلیک کرد اطلاعات فرم بوسیله فناوری ایجکس ارسال بشه و مانع از رفرش صفحه بشیم که خیلی هم آسون هست چون شما دیگه کد جاوا اسکریپت خاصی نمی نویسید و فقط یک متد جی کوئری رو فراخوانی می کنید و اون همه کارهای ارسال رو انجام میده ( اصلا جی کوئری برای آسون کردن جاوا اسکریپت اومده)
کدها به صورت زیر باید نوشته بشه :
1 <script>
2 $(document).ready(function(){
3 $("#form1").submit(function() {
4 var set={target:'#result',beforeSubmit:before};
5 $("#form1").ajaxSubmit(set);
6 return false;
7 });
8 });
9
10 function before()
11 {
12 $("#result").html("درحال ارسال اطلاعات");
13
14 }
15 </script>
در نمونه بالا ما دستورات مربوطه رو نوشتیم و در صفحه حاوی فرم قرار دادیم .
توضیح کد بالا :
در خط اول تک اسکریپتی رو باز کردیم تا دستورات جاوااسکریپتی توش بنویسیم
در خط دوم گفتیم وقتی که سند html ما کاملا لود شده یکسری دستورات اجرا بشه
در خط سوم گفتیم وقتی فرمی که دارای آیدی form1 هست سابمیت شد یکسری دستورات اجرا بشه
در خط چهارم متغییری بنام set ایجاد کردیم و پارامتر هایی که متد ajaxSubmit نیاز داره رو داخلش ریختیم ( این متد پارامترهای زیادی میتونه داشته باشه ولی ما فقط به دوتای اون اکتفا کردیم که اولی target هست و تعیین کننده عنصری هست که قراره نتیجه رو نشون بده و دومین پارامت هم نام تابعی است که قراره در هنگام ارسال اجرا بشه)
در خط پنجم گفتیم که میخواهیم فرمی که آیدی اون form1 هست با متد ajaxSubmit ارسال بشه و پارامترهارو هم بهش دادیم ( صفحه گیرنده فرم همون action تعیین شده در فرم خواهد بود و در اینجا نیازی به تعیین اون نیست)
در خط ششم گفتیم که جلوی لود کامل صفحه هنگام سابمیت فرم رو بگیر
در خط دهم تا چهاردهم هم اون تابع before رو که در پارامترها نوشتیم رو تعریف می کنیم و میگیم که در زمان ارسال فرم متن 'در حال ارسال...' نوشته بشه که بلافاصله بعد از تکمیل ارسال فرم به سرور ناپدید میشه و مقادیر بازگشتی از صفحه پردازش فرم در داخل عنصر هدف یعنی عنصری که آی دی اونو result قرار دادیم نمایش داده می شود که مقدار بازگشتی معمولا یک متن اکو شده هست که نتیجه موفق بودن عملیات ارسال فرم یا خطاهای مربوطه رو بر میگردونه
در خط پانزدهم هم تگ اسکریپت رو می بندیم
ضمنا فرم مربوطه هم باید از قبل در صفحه شما وجود داشته باشه که ما بشکل زیر اونو قرار دادیم
<form method="post" id="form1" >
name: <input name="name" type="text" >
<br>
familly: <input name="familly" type="text" >
<br>
<input name="btn" type="submit" value="ارسال" >
</form>
امیدوارم تونسته باشم آسونترین روش ارسال فرم به روش ایجکس رو بهتون آموزش بدم
آرزوی موفقیت براتون دارم
بهروز
