متد ()load
این متد ساده ولی بسیار قدرتمند است.
متد ()load داده را از سرور بارگزاری کرده و داده برگشتی را داخل عنصر انتخاب شده قرار می دهد.
$(selector).load(URL,data,callback);
پارامتر URL الزامی بوده و مشخص کننده آدرسی است که می خواهید آن را بارگزاری کنید.
پارامتر data اختیاری بوده و مشخص کننده مجموعه ای از جفت کلید/مقدار querystring است که میخواهید به همراه درخواست ارسال کنید.
پارامتر callback اختیاری بوده نام تابعی را که می خواهید بعد از پایان متد ()load فراخوانی شود را مشخص می کند.
در بخش زیر، محتوای مثال بعدی قرار داده شده است: "demo_test.txt":
<h2>jQuery & AJAX </h2>
<p id="p1">This is some text in a paragraph.</p>
مثال زیر محتوای فایل "demo_test.txt" را داخل عنصر <div> بارگزاری می کند
همچنین می توانید سلکتورهای jQuery را به پارامتر url اضافه کنید.
مثال زیر محتوای عنصری با id=p1 را از فایل demo_test.txt داخل عنصر <div> بارگزاری می کند.
$("#div1").load("demo_test.txt");
پارامتر callback اختیاری بوده نام تابعی را که می خواهید بعد از پایان متد ()load فراخوانی شود را مشخص می کند. تابع بازگشتی می تواند پارامترهای مختلفی بپذیرد:
• responseTxt - حاوی محتوای نهایی خواهد بود، اگر فراخوانی موفقیت آمیز باشد.
• statusTxt - حاوی وضعیت فراخوانی است.
• xhr - حاوی شی XMLHttpRequest است.
مثال زیر پس از اتمام اجرای متد load() ، یک پیغام هشدار نمایش می دهد. اگر متد ()load موفقیت آمیز باشد، این پیغام " بارگزاری محتوای خارجی باموفقیت انجام شد. " نمایش داده خواهد شد. اگر مشکلی رخ داده باشد نیز پیغام خطا نشان خواهد داد:
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
خلاصه درس
متد ()load داده را از سرور بارگزاری کرده و داده برگشتی را داخل عنصر انتخاب شده قرار می دهد.