مетод load() jQuery ajax
مثال
برای تغییر متن عنصر div از درخواست AJAX استفاده کنید:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
تعریف و استفاده
مетод load() از درخواست AJAX برای بارگذاری داده‌ها از سرور استفاده می‌کند و داده‌های بازگشتی را در عناصر مشخصی قرار می‌دهد.
توجه:یک نام دیگر نیز وجود دارد load jQuery رویدادمетод. انتخاب کدام، بستگی به پارامترها دارد.
نحوه استفاده
load(url,data,function(response,status,xhr))
| پارامترها | توضیحات |
|---|---|
| url | URLای که درخواست باید به آن ارسال شود را مشخص می‌کند. |
| data | اختیاری. داده‌هایی که با درخواست به سرور ارسال می‌شوند را مشخص می‌کند. |
| function(response,status,xhr) |
اختیاری. توابعی که باید پس از تکمیل درخواست اجرا شوند را مشخص می‌کند. پارامترهای اضافی:
|
شرح دقیق
این روش ساده‌ترین روش برای دریافت داده از سرور است. تقریباً مشابه $.get(url, data, success) است، اما تفاوت دارد که یک تابع جهانی نیست و یک تابع بازگشت‌دهنده‌ی مخفی دارد. هنگامی که پاسخ موفقیت‌آمیز تشخیص داده می‌شود (مثلاً وقتی textStatus به "success" یا "notmodified" باشد)، .load() محتوای HTML عنصر تطابق داده شده را به داده‌های بازگردانده شده تنظیم می‌کند. این意味着 بیشتر استفاده‌های این روش بسیار ساده خواهد بود:
$("#result").load("ajax/test.html");
اگر یک تابع بازگشت‌دهنده ارائه شود، این تابع پس از انجام پردازش‌های پس از اجرا اجرا می‌شود:
$("#result").load("ajax/test.html", function() {
alert("بارگذاری انجام شد.");
});
در دو مثال بالا، اگر مستند فعلی شامل شناسه‌ی "result" نباشد، روش .load() اجرا نمی‌شود.
اگر داده‌ای که ارائه می‌شود یک شیء است، از روش POST استفاده می‌شود؛ در غیر این صورت از روش GET استفاده می‌شود.
بارگذاری بخش‌های صفحه
مетод .load()، برخلاف $.get()، اجازه می‌دهد تا بخشی از مستند خارجی را که می‌خواهیم وارد کنیم را مشخص کنیم. این کار از طریق استفاده از یک قالب خاص برای پارامتر url انجام می‌شود. اگر این رشته شامل یک یا چند فاصله باشد، رشته‌ای که در اولین فاصله قرار دارد، انتخاب‌کننده‌ی jQuery برای محتوایی که قرار است بارگذاری شود است.
ما می‌توانیم مثال بالا را تغییر دهیم تا بتوانیم از بخشی از مستند به دست آمده استفاده کنیم:
$("#result").load("ajax/test.html #container");
اگر این روش را اجرا کنید، محتوای ajax/test.html را باز می‌گرداند، اما سپس، jQuery مستند بازگردانده شده را تحلیل می‌کند تا عناصر دارای شناسه‌ی مخزن را پیدا کند. این عنصر، به همراه محتوای آن، به عناصر دارای شناسه‌ی نتیجه‌ی اضافه می‌شود و باقیمانده‌ی مستند بازگردانده شده دور انداخته می‌شود.
jQuery از ویژگی .innerHTML مرورگر برای تحلیل مستند بازیابی شده و وارد کردن آن به مستند فعلی استفاده می‌کند و در این فرآیند، مرورگر معمولاً عناصر را از مستند فیلتر می‌کند، مانند عناصر <html>, <title> یا <head>. در نتیجه، عناصر بازیابی شده توسط .load() ممکن است با مستندی که به طور مستقیم توسط مرورگر بازیابی شده است، کاملاً یکسان نباشند.
توجه:به دلیل محدودیت‌های امنیتی مرورگر، بیشتر درخواست‌های "Ajax" از سیاست هم‌منبع پیروی می‌کنند؛ درخواست‌ها نمی‌توانند از دامنه‌های مختلف، زیردامنه‌ها یا پروتکل‌ها با موفقیت داده‌ها را بازیابی کنند.
مثال‌های بیشتری
مثال 1
محتوای فایل feeds.html بارگذاری کنید:
$("#feeds").load("feeds.html");
مثال 2
مثل مثال بالا، اما با فرستادن پارامترهای اضافی به صورت POST و نمایش پیام در موفقیت:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("25 ورودی آخر در فید بارگذاری شده‌اند");
});
مثال 3
بخش‌های ناوبری کناری مقاله را به یک لیست نامرتب (unordered list) بارگذاری کنید:
کد HTML:
<b>jQuery Links:</b> <ul id="links"></ul>
کد jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
مثال‌های بیشتری از TIY
- درخواست AJAX تولید کنید و داده‌ها را از طریق این درخواست ارسال کنید
- چگونه از پارامتر data برای ارسال داده از طریق درخواست AJAX استفاده کنیم. (این مثال در آموزش AJAX توضیح داده شده است.)
- درخواست AJAX تولید کنید و از طریق این درخواست داده ارسال کنید
- چگونه از پارامتر function برای پردازش نتایج داده‌های درخواست AJAX استفاده کنیم.
- درخواست AJAX با خطا تولید کنید
- چگونه از پارامتر function برای پردازش خطاهای درخواست AJAX (با استفاده از پارامتر XMLHttpRequest) استفاده کنیم.
