امروز یک مثال کاربردی با AJAX را کار خواهیم کرد. برای کار با AJAX شما ابتدا باید با جاوااسکریپت و یا یکی از کتابخانه های جاوااسکریپت آشنایی داشته باشید. من در این مثال از jQuery برای کار با AJAX استفاده میکنم. بتدا دو  route در فایل routes.php ایجاد میکنیم:

داخل کلاس WelcomeController متدهای ajaxForm برای درخواست های GET و متد postAjaxForm را برای درخواست های POST ایجاد میکنیم. متد ajaxForm فرم را به این صورت می نویسیم:

حاال یک فایل ویو به نام ajax.blade.php در مسیر resources/views ایجاد میکنیم و کدهای زیر را در آن قرار دهید:

همانطور که مشاهده می کنید ابتدا در css دو کلاس error و sucess برای نمایش زیباتر پاسخ و پیغام های خطا تعریف کردم. فرم موردنظرمان را ایجاد کردیم و کتابخانه جی کوئری را به صفحه ضمیمه کرده و در نهایت کد AJAX را نوشتیم. در کد آژاکس  متد درخواست یا همون پارامتر type رو POST قراردادم و همچنین نوع داده ای که می خواهیم دریافت کنیم رو JSON گذاشتم چون قرار است پاسخ ما از نوع json باشد url آن را هم به صورت داینامیک تعریف کردم و از خصوصیت action فرم گرفتم، که شما می توانید به صورت دستی هم مقدار بدهید چون من میخواهم این کد آژاکس قابل استفاده مجدد در هر پروژه دیگر باشد اینکار را کردم. همه داده های فرم را هم به صورت سریالایز فرستادم که باز هم شما می توانید به صورت دستی اینکار را بکنید. متد done هم اگر درخواست آژاکس با موفقیت به پایان برسد پاسخ دریافتی رو دریافت میکنیم و متد fail هم در صورتی که کد آژاکس دارای خطا باشد عملیات موردنظرمان را در آن می نویسیم.
قبل از اینکه کدهای داخل متد done رو توضیح بدم بریم اکشن postAjaxForm در کنترلر WelcomeController رو مشاهده کنیم:

ابتدا بررسی کردیم اگر نوع درخواست ajax بود ادامه کار را انجام دهیم و سپس داده های فرم را اعتبارسنجی کردیم و اگر اعتبار سنجی دارای خطا بود خطا ها را با استفاده از کلاس Response و متد json به صورت JSON تولید میکنیم. خطاها را به عنوان آرگومان به این متد می دهیم. اندیس ها نام فیلد فرم و مقدار آن پیغام خطای مورد نظر است.

در صورتی که اعتبارسنجی بدون خطا باشد یک پاسخ در قالب json برای تست ایجاد کردم به این صورت که آرایه ای که به متد json دادیم اندیس آن را success قرار دادم که به این اندیس ها در کد آژاکس نیاز پیدا میکنیم. حالا در مثالی دیگر داخل کد AJAX متد done رو نگاه کنید:

همانطور که می بینید response ای که دریافت کردیم را به راحتی میتوانیم مدیریت کنیم. ابتدا مقدار span ها و تگ با آیدی results را در هر بار که درخواست آژاکس ارسال میکنیم خالی میکنیم تا پیغام های درخواست قبلی پاک شوند سپس همانند دستور foreach در php با استفاده از دستور each می توانیم به اندیس ها و مقادیر هر آیتم دسترسی داشته باشیم. من در این مثال از switch استفاده کردم تا هر اندیسی که به عنوان پاسخ برایمان ارسال شده را در جای مناسب خودش نمایش بدهم index همان اندیس مورنظرمان و val هم مقدار آن می باشد.

بعضی مواقع شما درخواست های ایجکس را بدون استفاده از فرم ارسال میکنید در نتیجه چون توکنی ارسال نمیکنید middleware عمومی که توکن را بررسی میکند درخواست را reject میکند برای حل این مشکل کافی است توکن را مثلا در تگ meta تولید کرده و سپس با استفاده از ajaxSetup توکن را به هدر اضافه کنید:

image_pdfدانلود فایل pdf این مقاله
کلیدواژه ها :

این خبر را به اشتراک بگذارید :