در دنیای توسعه وب، بهبود تجربه کاربری و کاهش زمان بارگذاری صفحات از اهمیت ویژه‌ای برخوردار است. یکی از روش‌های کاربردی برای دستیابی به این هدف، استفاده از درخواست های Ajax است که به شما امکان ارسال و دریافت اطلاعات از سرور را بدون نیاز به بارگذاری مجدد صفحه می‌دهد. در این مقاله قصد داریم نحوه ارسال درخواست های Ajax در فریمورک محبوب لاراول را بررسی کنیم و با استفاده از کتابخانه jQuery، فرایند ارتباط با سرور را بهینه‌تر کنیم.

فریمورک لاراول یکی از محبوب‌ترین فریمورک‌های توسعه وب بر پایه PHP است که امکان مدیریت سمت سرور و کاربر را به طور همزمان فراهم می‌کند و به کمک آن می‌توان وب‌سایتی با تمام امکانات مورد نیاز طراحی کرد. برای مدیریت فرآیندهای سمت کاربر، استفاده از زبان محبوب JavaScript ضروری است، زیرا بسیاری از تعاملات کاربر مانند درخواست‌های بدون رفرش صفحه با این زبان انجام می‌شوند.

چرا از Ajax در پروژه‌های لاراولی استفاده کنیم؟

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

گام به گام ارسال درخواست Ajax با jQuery در لاراول

برای مثال، قصد داریم با استفاده از درخواست Ajax، لیست کاربران موجود در دیتابیس را برای مدیر سایت نمایش دهیم. برای این منظور، ابتدا باید یک مسیر (route) در فایل web.php در پوشه routes ایجاد کنیم. به عنوان مثال:

Route::get(‘users/ajax/get-all-users’,[UserController::class,’getAllUsers’]);

در این مثال، درخواست از نوع GET است. سپس، یک فایل جاوااسکریپت در مسیر public/js ایجاد کرده و کدهای مربوط به درخواست Ajax را در آن قرار می‌دهیم:

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، پاسخ به صورت JSON برگردانده می‌شود:

جهت کنترل کردن این درخواست در سمت سرور، پس از ایجاد کنترلر مربوط به این درخواست که در قسمت مسیرها تعریف کردیم (کنترلر UserController)، در متد تعریف‌شده مربوط به این درخواست یعنی getAllUsers و پس از پردازش این درخواست، باید پاسخ را به صورت json برگردانیم. برای این کار از دستور زیر در کنترلر خود استفاده می‌کنیم:

return response()->json($users);

در نهایت، باید فایل جاوااسکریپت را به صفحه Blade متصل کنیم. این کار را با استفاده از دستور asset انجام می‌دهیم:

<script src=”{{ asset(‘js/users.js’) }}”></script>

اکنون فایل جاوااسکریپت به صفحه blade لینک شده است و ارسال و دریافت درخواست به درستی انجام خواهد شد.

ایجاد مسیرهای درخواست Ajax در لاراول

اگر بخواهیم از درخواست POST استفاده کنیم، باید نوع مسیر را در فایل web.php به POST تغییر دهیم و همچنین مقدار CSRF Token را همراه با درخواست ارسال کنیم. نمونه درخواست Ajax از نوع POST به صورت زیر است:

برای اینکه بتوانیم 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 در لاراول، می‌توانید تجربه کاربری بهتری را به بازدیدکنندگان سایت خود ارائه دهید و عملیات سمت سرور را به شکلی سریع‌تر و بدون نیاز به بارگذاری مجدد صفحه مدیریت کنید. همچنین با ترکیب این قابلیت با jQuery، کدنویسی آسان‌تر و مدیریت داده‌ها در پروژه‌های لاراولی به‌صورت موثر انجام می‌شود. حالا که با روش ارسال درخواست Ajax در لاراول آشنا شدید، می‌توانید از این قابلیت در پروژه‌های خود برای بهبود عملکرد و کارایی سایت بهره بگیرید.

برای بهبود تجربه کاربری و افزایش سرعت عملکرد وب‌سایت خود، اکنون زمان آن است که به استفاده از درخواست‌های Ajax در پروژه‌های لاراول خود اقدام کنید و با بهره‌گیری از این تکنیک، خدمات بهتری به کاربران ارائه دهید. با ما در ویرا آریان همراه باشید!