اعتبار سنجی Ajax در لاراول

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

قدم اول

ابتدا به کنترلر مورد نظر خود رفته و اکشن store را بدین شکل کدنویسی میکنیم :

public function store(Request $request) 
{
    $this->validate($request,['title'=>'required','slug'=>'required']);
    if ($request->ajax()) {
        Post::create([title=>$request->title,slug=>$request->slug]);
    }
}

تشریح کدها :

خط ۲ : اعتبار سنجی فیلدهای مورد نیاز شامل فیلد title و slug که هردو به صورت required اجباری هستند .
خط ۳ : بررسی درخواست که اگر از نوع Ajax بود پست جدید ذخیره شود .

قدم دوم

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

$(document).ready(function() {
    $(#btnsave).click(function(e) {
        e.preventDefault();
        $.ajax({
            type: POST,
            url: {‍{ route('post.store') }},
            data: {
                title: $('#title').val(),
                slug: $('#slug').val(),
                _token: '{‍{ csrf_token() }}'
            },
            success: function() {
                $(#title).val();
                $(#slug).val();
                toastr.success('پست جدید با موفقیت ثبت شد', {
                    timeOut: 5000
                }, {
                    positionClass: toast-bottom-left
                });
            },
            error: function(xhr) {
                var errors = xhr.responseJSON;
                var error = errors.title[0];
                if (error) {
                    toastr.error(error, {
                        timeOut: 5000
                    }, {
                        positionClass: toast-bottom-left
                    });
                }
            }
        }, json);
    });
});

تشریح کدها :

خط ۲ : در رویداد کلیک دکمه ذخیره پست رویدادی را تعریف کرده ایم.

خط ۳ : متد event.preventDefault() از عملی که به صورت دیفالت و پیش فرض بعد یک رویداد بر روی یک المان باید انجام شود، جلوگیری می کند. مثلا جلوگیری از ارسال فرم به هنگام فشردن دکمه submit و یا از عمل پیش فرضی که به هنگام کلیک بر روی لینک می شود، یعنی رفتن به آن آدرس، جلوگیری میکند!

خط ۴ : استفاده از درخواست به صورت Ajax.

خط ۵ : نوع درخواست را مشخص میکنیم.

خط ۶ : آدرس مربوط به Route که در روت تعریف کردیم را مشخص میکنیم . که در اینجا از route name استفاده کردیم.

خط ۷ : اطلاعات مربوط به فرم رو مشخص میکنیم یعنی فیلد های title و slug و همچنین CSRF TOKEN.

خط ۱۲ : در صورتی که درخواست با موفقیت انجام شود در بخش success مشخص کردیم که فیلدهای ورودی را ابتدا خالی کند سپس با استفاده از کتابخانه جیکوئری toastr یک پیغام را به کاربر نمایش میدهیم .

خط ۲۱ : در صورتی که درخواست با مشکل اعتبار سنجی روبه رو شود با استفاده از بخش error میتوانیم خطا های اعتبار سنجی رخ داده رو دریافت و نمایش دهیم.

قدم سوم

به فایل route.php رفته و مسیر ثبت پست جدید را تعیین کنید:

Route::post('/post',['as'=>'post.store','uses'=>[email protected]']);

حال برای اجرا اعتبار سنجی و نمایش خطاهای دریافتی به آدرس http://yourdomain.ir/post میرویم .

سپس بدون وارد کردن مقادیر ورودی فیلدهای عنوان و نامک slug بر روی ثبت کلیک میکنیم . مشاهده میکنید که پیغام های زیر را دریافت کردید:

برای نمایش جزئیات بیشتر میتوانید کلید F12 رو بزنید و به Inspect مرورگر خود بروید و جزییات را در بخش های Console و Network مشاهده کنید :

خب همان طور که میبینید درخواستی از نوع POST ارسال شده که در Response با status code : 422 روبه رو می شویم و در بخش Network هم خطا های مربوط به اعتبار سنجی را مشاهده میکنید.

امیدوارم این آموزش هم مفید واقع شده باشه و استفاده لازم رو ازش برده باشید .