آخرین بازبینی: ۱۴۰۰/۱۲/۲۵

آموزش AJAX در لاراول

فناوری AJAX در طراحی سایت مدرن جایگاه مهمی دارد و فریم‌ورک‌های برنامه‌نویسی وب مانند Laravel هم امکانات ویژه‌ای برای این منظور در نظر گرفته‌اند. پیش از شروع به آموزش AJAX در لاراول لازم است تا با این فناوری آشنایی قبلی داشته باشید.

فراخوانی AJAX و VerifyCsrfToken

یکی از Middlewareها که در لاراول به صورت خودکار فراخوانی می‌شود، VerifyCsrfToken نام دارد و وظیفه دارد تا اجرای دستوراتی که از سمت کاربر نیست را مسدود کند. این کار با بررسی وجود CSRF Token به همراه درخواست صورت می‌پذیرد.

هنگامی که فرم‌های شما به صورت سنتی ارسال می‌شوند، می‌بایست فیلد CSRF را در فرم درج کنید. همچنین هنگامی که درخواست شما با استفاده از AJAX ارسال می‌شود، این کار ضروری است.

اگر برای درخواست AJAX از فریم‌ورک‌هایی که کوکی X-XSRF-TOKEN را می‌شناسند استفاده می‌کنید، نیاز نیست تا هیچ کار اضافه‌ای انجام دهید. از جمله این فریم‌ورک‌ها می‌توان Angular و Axios را نام برد.

استفاده در jQuery

اگر برای ارسال درخواست‌های خود از jQuery استفاده می‌کنید، می‌توانید کدهای زیر را برای انجام تنظیمات لازم روی jQuery فراخوانی کنید:

window.getCookie = function( name ) {
	var match = document.cookie.match( new RegExp( '(^| )' + name + '=([^;]+)' ) );
	if( match ) return match[ 2 ];
}

jQuery( document ).on( 'ajaxSend', addCSRF );
	
function addCSRF( event, jqxhr, settings ) {
	jqxhr.setRequestHeader( 'X-XSRF-TOKEN', getCookie( 'XSRF-TOKEN' ) );
}

window.getCookie = function( name ) {

var match = document.cookie.match( new RegExp( '(^| )' + name + '=([^;]+)' ) );

if( match ) return match[ 2 ];

}

jQuery( document ).on( 'ajaxSend', addCSRF );

function addCSRF( event, jqxhr, settings ) {

jqxhr.setRequestHeader( 'X-XSRF-TOKEN', getCookie( 'XSRF-TOKEN' ) );

}

یا می‌توانید با درج کد CSRF در قالب یک Meta Tag به صفحه، کد زیر را هم استفاده نمایید:

<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
	jQuery.ajaxSetup( {
		headers: {
			'X-CSRF-TOKEN': jQuery( 'meta[name="csrf-token"]' ).attr( 'content' )
		}
	} );
</script>

jQuery.ajaxSetup( {

headers: {

'X-CSRF-TOKEN': jQuery( 'meta[name="csrf-token"]' ).attr( 'content' )

}

} );

</script>

جاوااسکریپت خالص

همچنین برای ارسال یک درخواست AJAX با استفاده از جاوااسکریپت خالص و با در نظر گرفتن توکن امنیتی لاراول، کدهای خود را به شکل زیر می‌توانید بنویسید:

window.getCookie = function( name ) {
	var match = document.cookie.match( new RegExp( '(^| )' + name + '=([^;]+)' ) );
	if( match ) return match[ 2 ];
}

var xhr = new XMLHttpRequest();

xhr.open( 'POST', 'login.php', true );
xhr.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded; charset=UTF-8' );
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );
xhr.setRequestHeader( 'X-XSRF-TOKEN', cookieGet( 'XSRF-TOKEN' ) );

xhr.onreadystatechange = function () {

	if( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {
		console.log( xhr.responseText );
	}

};

xhr.send(
	'username=' + encodeURIComponent( username ) + '&' +
	'password=' + encodeURIComponent( password )
);

window.getCookie = function( name ) {

var match = document.cookie.match( new RegExp( '(^| )' + name + '=([^;]+)' ) );

if( match ) return match[ 2 ];

}

var xhr = new XMLHttpRequest();

xhr.open( 'POST', 'login.php', true );

xhr.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded; charset=UTF-8' );

xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest' );

xhr.setRequestHeader( 'X-XSRF-TOKEN', cookieGet( 'XSRF-TOKEN' ) );

xhr.onreadystatechange = function () {

if( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

console.log( xhr.responseText );

}

};

xhr.send(

'username=' + encodeURIComponent( username ) + '&' +

'password=' + encodeURIComponent( password )

);

ارسال فیلدهای یک فرم واقعی به صورت AJAX

برای جمع‌آوری مقادیر وارد شده در یک فرم واقعی می‌توانیم از اینترفیس FormData استفاده کنیم. این اینترفیس، تمامی فیلدهای موجود در یک فرم را که شرایط ارسال داشته باشند، جمع‌آوری می‌کند. پس از جمع‌آوری مقادیر می‌توانیم با یک درخواست AJAX اطلاعات را به سرور ارسال کنیم:

<form id="register-form" action="laravel-route">
	<label for="fname">نام</label>
	<input type="text" name="fname" id="fname">
	<label for="lname">نام خانوادگی</label>
	<input type="text" name="lname" id="lname">

	<input type="submit" value="ثبت نام">
</form>

<script>
	var form = document.querySelector( 'register-form' );

	form.addEventListener( 'submit', function( evt ) {
		evt.preventDefault();

		var request = new XMLHttpRequest();

		request.onreadystatechange = function() {

			if( request.readyState === XMLHttpRequest.DONE && request.status === 200 ) {
				console.log( request.responseText );
			}

		};

		request.open( 'POST', form.getAttribute( 'action' ) );

		request.send( new FormData( form ) );
	} );
</script>

<label for="lname">نام خانوادگی</label>

</form>

var form = document.querySelector( 'register-form' );

form.addEventListener( 'submit', function( evt ) {

evt.preventDefault();

var request = new XMLHttpRequest();

request.onreadystatechange = function() {

if( request.readyState === XMLHttpRequest.DONE && request.status === 200 ) {

console.log( request.responseText );

}

};

request.open( 'POST', form.getAttribute( 'action' ) );

request.send( new FormData( form ) );

} );

</script>

در قطعه کد بالا، هنگامی که کاربر روی دکمه‌ی Submit فرم کلیک کند، فرآیند پیش‌فرض ارسال اجرا نمی‌شود و در عوض یک درخواست AJAX به سرور ارسال می‌شود و پاسخ نیز در کنسول مرورگر چاپ می‌شود.

فراخوانی متد preventDefault روی event در کد بالا ضروری است تا از Submit فرم به صورت عادی جلوگیری کند.

تبدیل خودکار خروجی به JSON

فریم‌ورک لاراول به صورت پیش‌فرض درخواست‌هایی که از به صورت AJAX ارسال شوند را شناسایی می‌کند و اگر پاسخ ارسالی شما به این درخواست‌ها از نوع آرایه یا مدل باشد، آن را به حالت JSON تبدیل می‌کند و با سرآمد مناسب به درخواست کننده بر‌می‌گرداند. برای مثال به دو مثال زیر توجه کنید:

public function get_user( $id ) {
	$user = User::findOrFail( $id );
	return $user;
}

public function get_sum( $a, $b ) {
	return [
		'sum' => $a + $b,
		'a' => $a,
		'b' => $b,
	];
}

public function get_user( $id ) {

$user = User::findOrFail( $id );

return $user;

}

public function get_sum( $a, $b ) {

return [

'sum' => $a + $b,

'a' => $a,

'b' => $b,

];

}

ایجاد خروجی JSON به صورت صریح

همچنین به صورت صریح می‌توانید مقدار خروجی را با نوع و محتوای JSON بازگشت دهید:

return response()->json( [
    'id' => 10,
    'name' => 'ROKA'
] );

return response()->json( [

'id' => 10,

'name' => 'ROKA'

] );