متد load در تلفیق جی کوئری و ایجکس

در این مقاله متد بارگذاری یا load را در تلفیق آجاکس با جی کوئری بررسی می کنیم.

آموزش جی کوئری

متد Load() در جی کوئری

متد load() متد ساده ولی قدرتمندی در Ajaxمیباشد.

متد load() دادهها را از سرور خوانده و داده ها را به تگ انتخاب شده بازمیگرداند.

نحوه استفاده از این متد:

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

پارامتر ضروری URL آدرس صفحه ای که قصد بارگذاری آن را دارید را میخواهند.

پارامتر اختیاری data مقدار querystring key را برای ارسال، به همراه درخواست تعیین میکند.

متد اختیاری 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");

مشاهده نتیجه

شما میتوانید برای خواندن اطلاعات از یک آدرس از selector ها هم استفاده کنید.

مثال زیر محتوای تگی که دارای id=”p1” را از فایل demo_test.txt خوانده و در تگ Div انتخاب شده به نمایش میگذارد:

$("#div1").load("demo_test.txt #p1");

مشاهده نتیجه

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

responseTxt: اگر خوانش اطلاعات درست پیش رود ، این متد دارای محتوای مد نظر خواهد بود.
statusTxt : این متد دارای وضعیت فراخوانی داده خواهد بود.
xhr : این متد دارای شیئ XMLHttpRequest خواهد بود.

مثال زیر یک هشدار را بعد از پایان متد load به نمایش میگذارد ، اگر فراخوانی اطلاعات با موفقیت باشد این پیام بصورت External content loaded successfully! و در صورتی که بارگذاری با خطا همراه باشد پیام خطا ظاهر میشود:

$("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);
});
});