در این مقاله قصد داریم نحوه کار با درخواست های ajax را در فریمورک لاراول بررسی کنیم. در این آموزش از کتابخانه jQuery برای ارسال و دریافت درخواست های ajax استفاده خواهیم کرد.
فریمورک لاراول یکی از فریمورک های توسعه وب می باشد که بر اساس زبان php است. در این فریمورک می‌توان همزمان سمت سرور و سمت کاربر سایت را مدیریت کرد و یک سایت با تمامی امکانات مورد نیاز را طراحی کرد. به طبع برای داشتن یک سایت با امکانات کامل، ملزم به استفاده از زبان محبوب JavaScript هستیم تا فرآیندهای سمت کاربر را به خوبی مدیریت کنیم. البته از این زبان برای کاربردهای سمت سرور نیز استفاده میشود که مورد بحث این مقاله نیست.
یکی از امکاناتی که زبان javaScript در اختیار ما قرار میدهد، درخواست های ajax می باشد. این درخواست ها بدون نیاز به رفرش شدن صفحه، ارسال و دریافت می‌شوند و شما می‌توانید بدون اینکه فرم خاصی را ثبت کنید، اطلاعاتی را به سمت سرور ارسال کنید و پاسخ آن را دریافت کرده و در سمت کاربر نمایش دهید. تمام این مراحل در مدت زمان بسیار کوتاه(بسیار کمتر از 1 ثانیه) انجام میشود. با استفاده از درخواست های ajax نیازی به بارگذاری مجدد صفحه نیست و در نتیجه سایت دارای تجربه کاربری بهتری خواهد بود.
حال برای مثال می‌خواهیم با استفاده از درخواست ajax، لیست تمام یوزرهای داخل دیتابیس را دریافت کنیم تا این لیست را برای ادمین نمایش دهیم. برای ارسال درخواست ajax در لاراول، ابتدا باید مسیر(route) مربوط به این درخواست را ایجاد کنید. بنابراین در فایل web.php در پوشه routes باید مسیر درخواست خود را ایجاد کنید. برای مثال مسیر زیر را تعریف میکنیم :
Route::get(‘users/ajax/get-all-users’,[UserController::class,’getAllUsers’]);
در این مثال، مسیر خود را از نوع get تعریف کرده‌ایم و در نتیجه نوع درخواست ajax خود را نیز باید از نوع get تعریف کنیم. حال یک فایل جاوااسکریپت در پوشه public در مسیر دلخواه ایجاد میکنیم. مثلا :
public/js/users.js
اکنون در این فایل، کدهای جاوااسکریپتی خود را می‌نویسیم. برای این کار باید از قبل کتابخانه jQuery را به پروژه خود اضافه کرده باشید که برای این کار می‌توانید از دستورات npm استفاده کنید. حال با فرض اینکه Jquery در پروژه شما نصب شده است، به کدنویسی فایل جاوااسکریپت می‌پردازیم. می‌خواهیم پس از بارگذاری کامل صفحه، لیست تمام یوزرها دریافت شود. بنابراین تمام کدهای خود را داخل تابع ready در jQuery قرار می‌دهیم. کد ajax ما به صورت زیر خواهد بود:
$(document).ready(function () {
$.ajax({
type: “get”,
url: “/users/ajax/get-all-users”,
success: function (response) {
console.log(response);
},
});
});
در این کد هیچ اطلاعاتی به سمت سرور ارسال نمی‌کنیم و فقط یک درخواست به سمت سرور ارسال میکنیم و پاسخ درخواست را در کنسول نمایش می‌دهیم.
جهت کنترل کردن این درخواست در سمت سرور، پس از ایجاد کنترلر مربوط به این درخواست که در قسمت مسیرها تعریف شده بود(کنترلر UserController)، در متد تعریف شده مربوط به این درخواست یعنی getAllUsers و پس از پردازش این درخواست، باید پاسخ را به صورت json برگردانیم. برای این کار از دستور زیر در کنترلر خود استفاده میکنیم :
return response()->json($users);
حال تنها کافی است تا فایل جاوااسکریپت خود را به صفحه blade متصل کنیم. برای این کار دستور asset در فایل blade خود استفاده میکنیم. برای مثال گفته شده در بالا، خط زیر را در انتهای فایل blade خود اضافه میکنیم :
<script src=”{{ asset(‘js/users.js’) }}”></script>
اکنون فایل جاوااسکریپت به صفحه blade لینک شده است و ارسال و دریافت درخواست به درستی انجام خواهد شد.
در این مثال از http verb از نوع get برای ارسال درخواست استفاده شده است. در صورتی که بخواهیم از درخواست با نوع post استفاده کنیم، علاوه بر اینکه باید در فایل web.php نوع مسیر را از نوع post قرار دهیم، باید نوع درخواست ajax را نیز به post تغییر داده و همچنین مقدار csrf_token را نیز به همراه درخواست خود ارسال کنیم.
برای اینکه بتوانیم csrf_token را در فایل js خود داشته باشیم، می‌توانیم از دستور @csrf در blade استفاده کنیم و در فایل جاوااسکریپت خود برای دریافت این مقدار از کد زیر استفاده کنیم:
$(‘input[name=”_token”]’).val()
در نهایت درخواست از نوع post به صورت زیر خواهد شد :
$(document).ready(function () {
$.ajax({
type: “post”,
url: “/users/ajax/get-all-users”,
data:{
_token : $(‘input[name=”_token”]’).val()
},
success: function (response) {
console.log(response);
},
});
});
دقت شود که csrf_token باید با نام _token در قسمت data در درخواست ajax ارسال گردد تا انجام عملیات ajax به درستی انجام شود. اکنون می‌توانید از درخواست های ajax در پروژه‌های خود در لاراول استفاده کنید.