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

آموزش ارسال اطلاعات Form با Ajax و jQuery

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

در بخش اول این کد یک فرم ساده قرار گرفته است. در ادامه نیز کدهای لازم برای تبدیل این فرم به حالت Ajax نوشته شده است.

نکته‌ی دیگر اینکه این روش برای آپلود فایل Ajax محدودیت دارد و اگر در فرم شما فیلدهای فایل موجود هستند، لازم است تا از روش دوم که پایین‌تر شرح داده شده استفاده نمایید.

آخرین نکته اینکه، این کد بدون توجه به method تعریف شده در فرم، اطلاعات را با روش post به سرور ارسال می‌کند. در صورت تمایل لازم است تا تغییراتی جزئی در کدها انجام دهید.

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

<form action="roka.php" id="form-id">
	<label for="fname">نام</label>
	<input type="text" id="fname" name='fname'>
	<label for="fname">نام خانوادگی</label>
	<input type="text" id="lname" name='lname'>
	
	<input type="submit" value="ارسال">
</form>

<script>
	$( function() {
		$( '#form-id' ).on( 'submit', ajaxForm );
	} );
	
	function ajaxForm( evt ) {
		evt.preventDefault();
		
		var $form = $( this );
		var data = $form.serializeObject();
	
		$.post( $form.attr( 'action' ), data, function( response ) {
			alert( response );
		} );
	}
	
	( function( $, undefined ){
		'$:nomunge'; // Used by YUI compressor.
	
		$.fn.serializeObject = function(){
			var obj = {};
	
			$.each( this.serializeArray(), function( i, o ){
				var n = o.name,
					v = o.value;
	
					obj[n] = obj[n] === undefined ? v
						: $.isArray( obj[ n ] ) ? obj[ n ].concat( v )
						: [ obj[n], v ];
			});
	
			return obj;
		};
	
	} )( jQuery );
</script>

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

</form>

$( function() {

$( '#form-id' ).on( 'submit', ajaxForm );

} );

function ajaxForm( evt ) {

evt.preventDefault();

var $form = $( this );

var data = $form.serializeObject();

$.post( $form.attr( 'action' ), data, function( response ) {

alert( response );

} );

}

( function( $, undefined ){

'$:nomunge'; // Used by YUI compressor.

$.fn.serializeObject = function(){

var obj = {};

$.each( this.serializeArray(), function( i, o ){

var n = o.name,

v = o.value;

obj[n] = obj[n] === undefined ? v

: $.isArray( obj[ n ] ) ? obj[ n ].concat( v )

: [ obj[n], v ];

});

return obj;

};

} )( jQuery );

</script>

روش دوم: با استفاده از افزونه jQuery Form

این کتابخانه ابزاری کامل و بهینه برای تبدیل فرم‌های HTML به فرم‌های Ajax است. تمامی فعالیت‌های لازم برای این کار در این افزونه انجام می‌شود و همچنین تنظیمات متعددی نیز برای سفارشی‌سازی فرآیندهای مختلف در اختیار شما قرار می‌گیرد.

بیشتر بخوانید: آشنایی بیشتر با افزونه jQuery Form

آموزش ارسال اطلاعات Form با Ajax و jQuery

روش دوم: با استفاده از افزونه jQuery Form

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ