امیرحسین نائی | امیر اچ ان

چگونه از ajax در jQuery استفاده کنیم ؟

چگونه از ajax در jQuery استفاده کنیم ؟

توی این آموزش میخواییم با ajax در jquery کار کنیم .
ای جکس به شما کمک میکنه که بدون اینکه صفحه رو رفرش کنید بتونید یسری اطلاعات رو در صفحه بروزرسانی کنید یا اینکه یه سری درخواست به یک فایل دیگه (مثلا یه فایل php) ارسال کنید.

برای اینکه بهتر کاربرد ajax رو متوجه بشید یک مثال میزنم :
فرض کنید شما میخوایید یک بخش جست و جو مطالب در سایتتون راه اندازی کنید . برای این مورد نیاز دارید که یک فیلد داشته باشید تا کاربر کلیدواژه مورد نظرش رو در اون وارد کنه و میخوایید به محض وارد کردن کلمه بدون انتقال به صفحه دیگه (یا رفرش صفحه) جست و جو انجام بشه و در باکس زیر فیلد جست جو نمایش داده بشه .
خب اینجا دقیقا همونجاییه که ajax میاد کمکتون !
با ajax میتونید تنظیم کنید به محض وارد شدن کلمه در فیلد مورد نظر یه درخواست به فایل php مربوط به سرچتون بره و نتیجه برگشت داده بشه به همین صفحه و نمایش داده بشه .

خب تا حالا فکر میکنم با کار ajax اشنا شدید .
حالا میخواییم ببینیم چطوری باید باهاش کار کنیم و راه اندازیش کنیم !
من از ajax کتابخونه jquery استفاده میکنم که خیلی راحت و مناسبه . در jquery برای ajax متد های زیادی است که من میخوام تو این پست دو تا از پر کاربرد ترین هاشو توضیح بدم .

$.get()
از این متد برای ارسال اطلاعات به صورت get به یک فایل و سپس دریافت پاسخ استفاده میشه.
به مثال زیر توجه کنید :

	
$(document).ready(function(){
    $("#btn").click(function(){
        $.get("test.php", { name:"AmirHossein", lastname:"Naei" }, function(data, status){
        	alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
	

در کد بالا تعریف کردیم که وقتی روی دکمه با ای دی btn کلیک شد یسری اطلاعات (name:"AmirHossein", lastname:"Naei") بصورت Get به فایل test.php ارسال بشه
مقادیر برگشتی هم data و status هستند که status وضعیت درخواست رو مشخص میکنه که موفق آمیز بود یا خیر و data هم پاسخ دریافتی از فایل text.php رو در خودش داره.

$.post()
از این متد هم برای ارسال اطلاعات به صورت post به یک فایل و سپس دریافت پاسخ استفاده میشه
پارامتر های ورودی و مقادیر خروجیش هم دقیقا مثل متد قبلیه
در مثال زیر من همون کد های مثال متد قبلی رو تغییر دادم :

	
$(document).ready(function(){
    $("#btn").click(function(){
        $.post("test.php", { name:"AmirHossein", lastname:"Naei" }, function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
	

میبینید که کد بالا که مربوط به متد $.post() است مثل متد $.get() شد.
تنها تفاوت کار این دو متد در نحوه ارسال اطلاعات به فایل text.php است.


تاریح ارسال/ویرایش پست : 1396/11/13

مدیر سایت

امیرحسین نائی | امیر اچ ان

امیرحسین نائی (amirhn - امیر اچ ان) هستم.
متولد 1379 عاشق❤️ برنامه نویسی با انواع زبان های مختلف 😃
از 15 سالگی یادگیری برنامه نویسی رو شروع کردم
و تا امروز همچنان درحال یادگیری هستم .
در تلاش برای تبدیل شدن به یک Full Stack Developer 💪
روز به روز بیشتر عاشق برنامه نویسی میشم و هرگز برام خسته کننده نمیشه !!!

ارسال نظر

account_circle
mail
security
متن نظر :