متد AJAX load()

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

متد load() در jQuery

متد load() در jQuery یک متد ساده اما قدرتمند AJAX است.[۱]

متد load() داده‌ها را از سرور بارگذاری کرده و داده‌های برگردانده شده را در عنصر انتخاب شده قرار می‌دهد.

نحو:

$(selector).load(URL,data,callback);

پارامتر اجباری URL، آدرس URL ای را که می‌خواهید بارگذاری شود را مشخص می‌کند.

پارامتر اختیاری data مجموعه ای از جفت‌های کلید/مقدار querystring را برای ارسال به همراه درخواست مشخص می‌کند.

پارامتر اختیاری callback نام تابعی است که باید بعد از کامل شدن متد load() اجرا شود.

در اینجا محتوای فایل مثال ما آمده‌است: "demo_test.txt"

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

مثال زیر محتوای فایل “demo_test.txt" را در یک عنصر <div> مشخص بارگذاری می‌کند:

مثال
$("#div1").load("demo_test.txt");

همچنین اضافه‌کردن یک انتخابگر jQuery به پارامتر URL نیز امکان‌پذیر است.

مثال زیر محتوای عنصر با id="p1" را داخل فایل "demo_test.txt" و درون یک عنصر <div> خاص بارگذاری می‌کند:

مثال
$("#div1").load("demo_test.txt #p1");

پارامتر اختیاری callback یک تابع callback را برای اجرا پس از اتمام متد load() مشخص می‌کند. تابع callback می‌تواند پارامترهای مختلفی داشته باشد:

  • responseTxt - اگر فراخوانی موفق باشد، دارای محتوای نتیجه است
  • statusTxt - شامل وضعیت فراخوانی است
  • xhr - دارای شیء XMLHttpRequest است

مثال زیر یک کادر هشدار را بعد از کامل شدن متد load() نشان می‌دهد. اگر متد load() موفق شود، "محتوای خارجی با موفقیت بارگذاری شد!" را نمایش می‌دهد و اگر شکست بخورد یک پیام خطا را نمایش می‌دهد:

مثال
1 $("button").click(function(){
2   $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
3     if(statusTxt == "success")
4       alert("External content loaded successfully!");
5     if(statusTxt == "error")
6       alert("Error: " + xhr.status + ": " + xhr.statusText);
7   });
8 });

مرجع jQuery AJAX

برای مرور کامل همه متدهای jQuery AJAX، لطفاً به مرجع jQuery AJAX مراجعه کنید.


منابع آموزشی