در قسمت قبل کدهای لازم برای بانک اطلاعاتی و همچنین کدهای CSS و HTML را نوشتیم . در این قسمت قصد داریم که کد های JQuery و AJAX لازم رو بنویسیم،ما در اینجا از AJAX خود جی کوئری هم استفاده کردیم که کار را برای ما راحت تر می کند. توی قسمت نهایی هم کد های سمت سرور رو می نویسیم.پس با ما همراه باشید.
خوب برای شروع تابع ready جی کوئری رو می نویسیم.
۱ $(document).ready(function(){
۲ });
بعدشم سه تا متغییر تعریف میکنیم.
۱ $(document).ready(function(){
۲ var answer=null;
۳ var question_id=null;
۴ var action=null;
۵
۶ });
خوب حالا این متغییر ها چی هست؟متغییر اول برای ما مقدار گزینه انتخاب شده رو نگهداری میکنه،متغییر دوم برای ما شناسه سوال (یا همون شناسه نظر سنجی) رو نگهداری میکنه و متغییر سوم هم مشخص میکنه که ما برای صفحه PHP که درخواست ای جکس رو پردازش میکنه چه نوع درخواستی رو میفرستیم (منظور درخواست ثبت نظر جدید یا اینکه نمایش نتایج نظر سنجی).
۱ $(‘input:radio[name=group]’).click(function(){
۲ answer=$(this).val();
۳ });
خوب ما با این تیکه کد مشخص میکنیم که هر وقت کاربر روی یکی از گزینه ها (دکمه هایی radio) کلیک کرد مقدارش توی متغییر answer ذخیره بشه.
دکمه ثبت نظر
۱ $(‘#send’).on(‘click’,function(){
۲ question_id=$(‘#question_id’).val();
۳ if(answer==null)
۴ {
۵ alert(‘لطفا یکی از گزینه ها را انتخاب نمایید’);
۶ return;
۷ }
۸ else
۹ {
۱۰ action=’vote’;
۱۱ question_id=$(‘#question_id’).val();
۱۲ call_ajax(action,question_id,answer);
۱۳ }
۱۴
۱۵ });
برای دکمه ثبت نظر ما اول از همه چک میکنیم ببینیم مقدار answer ست شده یا نه اگه ست نشده بود که پیغام نشون میدیم اگه ست شده بود مقدار متغییر action رو برابر vote قرار میدیم و مقدار input مخفی که توی فرم گذاشته بودیم و حاوی شناسه سوال (شناسه نظر سنجی) بود رو دریافت میکنیم و داخل متغییر question_id قرار میدیم و بعدشم تابع call_ajax رو فراخوانی میکنیم (تایع call_ajax رو خودمون نوشتیم برای جلوگیری تکرار کد ها).
۱ $(‘#results’).on(‘click’,function(){
۲ action=’result’;
۳ question_id=$(‘#question_id’).val();
۴ call_ajax(action,question_id,answer);
۵ });
خوب اینم از کد دکمه نمایش نتایج،اولش مقدار action رو برابر result قرار دادیم،بعدشم مقدار question_id رو مثل دکمه قبلی ست کردیم و در نهایت هم تابع call_ajax رو با پاس دادن متغییر های مناسب فراخوانی کردیم.
تابع call_ajax
۱ function call_ajax(action,question_id,answer)
۲ {
۳ $(‘#loader’).text(‘لطفا صبر کنید …’).fadeIn(1000);
۴ $.ajax({
۵ url:’ajax.php’,
۶ data:{action:action,question_id:question_id,answer:answer},
۷ type:’post’,
۸ success:function(data){
۹ $(‘.btn’).fadeOut(1000);
۱۰ $(‘#loader’).fadeOut(1000).delay(500);
۱۱ $(‘.title’).text(‘نتایج نظرسنجی’).delay(500);
۱۲ $(‘.options’).html(data).fadeIn(1000).delay(500,function(){
۱۳ $(‘.s_result’).each(function(){
۱۴ var width=$(this).attr(‘data-width’);
۱۵ $(this).animate({‘width’:width+’%’},1000);
۱۶ });
۱۷ });
۱۸ },
۱۹ });
۲۰ }
خوب بچه ها این تابع هم قیافش کمی غلط اندازه و گرنه چیزی نیست،همین که تابع فراخوانی شد اون صفحه سیاه با پیغام لطفا صبر کنید رو نشون میدیم (می تویند از تصاویر loading استفاده کنید) بعدشم در خواست ایجکس رو ست میکنیم،url مقدار آدرس صفحه سمت سرور هست که درخواست مارو پردازش میکنه وبرمیگردنه،قسمت data هم اطلاعاتی رو که میخوایم بفرستیم مشخص میکنیم (ما اینجا همون متغییر های که مقدار دهی کرده بودیم رو این جا می نویسیم)،type هم نوع درخواست رو مشخص میکنه ما اینجا post گذاشتیم،قسمت success هم با یه تابع مشخص میکنه که اگه درخواست موفق بود و اطلاعات برگشت چه کاری انجام بدیم،اون تابع جلوش هم یه پارامتر به نام data میگیره که این data همون اطلاعات برگشتی از صفحه سمت سرور هست،خوب حالا کار اصلی برمیگرده به تابعی که برای success نوشتیم،خوب اول دو تا دکمه مون رو مخفی میکنیم بعدش اون صفحه سیاه صبر کنید رو محو میکنیم و بعد قسمت عنوان سوال نظر سنجی رو با متن نتایج نظر سنجی عوض کردیم،حالا توی فرمی که داشتیم یه تگ div داشتیم با آیدی options که گزینه ها رو توی خودش نگهداری میکرد حالا ما محتویات این قسمت رو با اطلاعات برگشتی از صفحه سمت سرور تعویض میکنیم اونم با کمی افکت،وقتی این افکت تموم بشه ما افکت حرکت گزینه ها رو انجام میدیم،شما الان تیو فرم خودتون گزینه های مثلا s_result یا data-width رو ندارید چون این قسمت ها توی صفحه سمت سرور تولید میشه و به این قسمت برمیگرده (من فقط این توضیح رو بگم که ما اونجا تگهای p ایجاد میکنیم و داخل هر تگ p یه تگ span قرار میدیم که این تگ های span درصد هر گزینه رو توی خودشون نگهداری میکنن،ما اولش توی قسمت استایل خاصیت width این تگ های span رو برابر صف قرار میدیم،برای هر تگ span ما یه خاصیت جدید به اسم data-width تعریف کردیم و مقدار این خاصیت رو با درصد گزینه، مقدار دهی کردیم،حالا وقتی اطلاعات برمیگرده ما مقدرای که توی خاصیت data-width داریم رو به راحتی با جی کوئری دریافت میکنیم و با متد animate جی کوئری نشون میدیم) خوب احتمالا تیو قسمت بعدی خودتون کامل اینو درک میکنید.
کد های کامل قسمت جی کوئری و ای جکس
۱ $(document).ready(function(){
۲ var answer=null;
۳ var question_id=null;
۴ var action=null;
۵
۶ $(‘input:radio[name=group]’).click(function(){
۷ answer=$(this).val();
۸ });
۹ $(‘#send’).on(‘click’,function(){
۱۰ question_id=$(‘#question_id’).val();
۱۱ if(answer==null)
۱۲ {
۱۳ alert(‘لطفا یکی از گزینه ها را انتخاب نمایید’);
۱۴ return;
۱۵ }
۱۶ else
۱۷ {
۱۸ action=’vote’;
۱۹ question_id=$(‘#question_id’).val();
۲۰ call_ajax(action,question_id,answer);
۲۱ }
۲۲
۲۳ });
۲۴ $(‘#results’).on(‘click’,function(){
۲۵ action=’result’;
۲۶ question_id=$(‘#question_id’).val();
۲۷ call_ajax(action,question_id,answer);
۲۸ });
۲۹
۳۰ });
۳۱
۳۲ function call_ajax(action,question_id,answer)
۳۳ {
۳۴ $(‘#loader’).text(‘لطفا صبر کنید …’).fadeIn(1000);
۳۵ $.ajax({
۳۶ url:’ajax.php’,
۳۷ data:{action:action,question_id:question_id,answer:answer},
۳۸ type:’post’,
۳۹ success:function(data){
۴۰ $(‘.btn’).fadeOut(1000);
۴۱ $(‘#loader’).fadeOut(1000).delay(500);
۴۲ $(‘.title’).text(‘نتایج نظرسنجی’).delay(500);
۴۳ $(‘.options’).html(data).fadeIn(1000).delay(500,function(){
۴۴ $(‘.s_result’).each(function(){
۴۵ var width=$(this).attr(‘data-width’);
۴۶ $(this).animate({‘width’:width+’%’},1000);
۴۷ });
۴۸ });
۴۹ },
۵۰ });
۵۱ }
