Logo for Parsclick

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

  بهروز ولیخانی بهروز ولیخانی
  August 10, 2016 at 3:22 PM
  ۲۰ امرداد، ۱۳۹۵ ساعت ۱۵:۲۲

درود ، در این آموزش قصد دارم ، اعتبار سنجی به صورت ایجکسی (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'=>PostController@store']);

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


post-view

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

error-vilidate-ajax

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

console-ajax-post

network-ajax

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

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

منبع : www.studio-design.ir