jQuery ajax - load() ਮੰਥਨ

ਉਦਾਹਰਨ

AJAX ਰਿਕਾਰਡ ਰੱਖ ਕੇ div ਐਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲਣਾ:

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

ਸੁਤੰਤਰ ਕਰਕੇ ਚੇਤਾਵਨੀ ਦੇਣਾ

ਤੁਸੀਂ ਪੰਨੇ ਦੇ ਨੇੜੇ ਹੋਰ TIY ਉਦਾਹਰਨ ਲੱਭ ਸਕਦੇ ਹੋ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

load() ਮੰਥਨ ਦੇ ਰਾਹੀਂ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਲੋਡ ਕਰਦਾ ਹੈ ਅਤੇ ਵਾਪਸ ਲਿਆ ਗਿਆ ਦਾਟਾ ਨਿਰਧਾਰਿਤ ਐਲੀਮੈਂਟ ਵਿੱਚ ਰੱਖਦਾ ਹੈ。

ਟਿੱਪਣੀ:ਇੱਕ ਹੋਰ ਨਾਮ load ਦੇ jQuery ਘਟਨਾਮੰਥਨ. ਕਿਹੜਾ ਵਰਤਣਾ ਹੈ, ਉਹ ਪੈਰਾਮੀਟਰ ਨਾਲ ਨਿਰਭਰ ਹੁੰਦਾ ਹੈ。

ਗਣਨਾ

load(url,data,function(response,status,xhr))
ਪੈਰਾਮੀਟਰ ਵੇਰਵਾ
url URLی که درخواست باید به آن ارسال بشه.
data اختیاری. داده‌ای که باید با درخواست به سرور ارسال بشه.
function(response,status,xhr)

اختیاری. تابعی که باید هنگام تکمیل درخواست اجرا بشه.

پارامترهای اضافی:

  • response - شامل داده‌ای که از درخواست برگردونه
  • status - شامل وضعیت درخواست ("success", "notmodified", "error", "timeout" یا "parsererror")
  • xhr - شامل یک شیء XMLHttpRequest

توضیحات دقیق‌تر

این روش ساده‌ترین روش برای دریافت داده از سرور است. تقریباً با $.get(url, data, success) برابر است، اما تفاوت اینه که یک تابع جهانی نیست و یک تابع بازگشتی مخفی داره. وقتی یک پاسخ موفقیت‌آمیز تشخیص داده می‌شه (مثلاً وقتی textStatus به 'success' یا 'notmodified' برسه)، .load() محتوای HTML عنصر که با آن مرتبطه رو به داده‌ای که برمی‌گردونه تنظیم می‌کنه. این به این معنیه که بیشتر استفاده‌های این متد بسیار ساده خواهند بود:

$("#result").load("ajax/test.html");

اگر یک تابع بازگشتی ارائه شده باشه، این تابع بعد از انجام پس‌پردازش اجرا می‌شه:

$("#result").load("ajax/test.html", function() {
  alert("بارگذاری انجام شد.");
});

در دو مثال بالا، اگر دکومنتی که در حال حاضر وجود داره شامل ID 'result' نباشه، متد .load() اجرا نمی‌شه.

اگر داده‌ای که ارائه می‌شه یک شیء است، از روش POST استفاده می‌شه؛ در غیر این صورت از روش GET استفاده می‌شه.

بارگذاری بخش صفحات

متد .load()، برخلاف $.get()، اجازه می‌ده که بخشی از دکومنتی که از راه دور دریافت می‌شه رو مشخص کنیم. این کار از طریق یک نحوه خاص در پارامتر url انجام می‌شه. اگر این رشته شامل یک یا چند فاصله باشه، رشته‌ای که بعد از اولین فاصله قرار داره، انتخاب‌گر جی‌کوئری برای مشخص کردن محتوایی که باید بارگذاری بشه، است.

ما می‌تونیم مثال بالا رو تغییر بدیم، تا بخشی از دکومنتی که به دست می‌آوریم رو استفاده کنیم:

$("#result").load("ajax/test.html #container");

اگر اسکریپت چل می‌کنه، محتوای ajax/test.html رو برمی‌گردونه، اما بعد، جی‌کوئری دکومنتی که برمی‌گردونه رو تحلیل می‌کنه تا عناصری که ID شون 'container'هست رو پیدا کنه. این عنصر، با محتوای خودش، داخل عنصری با ID 'result' قرار می‌گیره و بقیه دکومنتی که برمی‌گردونه دور انداخته می‌شه.

jQuery ਬਰਾਉਜ਼ਰ ਦੀ .innerHTML ਸੁਬੱਚਾਰਜ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਪ੍ਰਾਪਤ ਹੋਣ ਵਾਲੇ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਪਾਰਸਿੰਗ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਮੌਜੂਦਾ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਜੋੜਦਾ ਹੈ।ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ, ਬਰਾਉਜ਼ਰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚੋਂ ਤੱਤ ਹਟਾਉਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ <html>, <title> ਜਾਂ <head> ਤੱਤ।ਨਤੀਜੇ ਵਜੋਂ, .load() ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਹੋਣ ਵਾਲੇ ਤੱਤ ਬਰਾਉਜ਼ਰ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਹੋਣ ਵਾਲੇ ਦਸਤਾਵੇਜ਼ ਨਾਲ ਸਮਾਨ ਨਹੀਂ ਹੁੰਦੇ।

ਟਿੱਪਣੀ:ਬਰਾਉਜ਼ਰ ਸੁਰੱਖਿਆ ਦੇ ਸੀਮਾਵਾਂ ਕਰਕੇ, ਮਿਆਰੀ "Ajax" ਬੇਨਤੀਆਂ ਸਾਮਾਨਿਆਂ ਨਾਲ ਮੂਲ ਸਰੋਤ ਨੀਤੀ ਅਨੁਸਾਰ ਹਨ; ਵੱਖਰੇ ਦੋਮੀਨ, ਉਪ-ਦੋਮੀਨ ਜਾਂ ਪ੍ਰੋਟੋਕੋਲ ਤੋਂ ਅੱਜਿਹੀਆਂ ਬੇਨਤੀਆਂ ਦੇ ਸਫ਼ਲ ਰਿਪੋਰਟ ਮਿਲਣਾ ਸੰਭਵ ਨਹੀਂ ਹੈ。

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

feeds.html ਫਾਈਲ ਦੇ ਸਮਗਰੀ ਨੂੰ ਲੋਡ ਕਰੋ:

$("#feeds").load("feeds.html");

ਉਦਾਹਰਣ 2

ਉੱਪਰ ਦੇ ਉਦਾਹਰਣ ਦੇ ਸਮਾਨ, ਪਰ POST ਰੂਪ ਵਿੱਚ ਸਹਾਇਕ ਪੈਰਾਮੀਟਰਾਂ ਭੇਜੋ ਅਤੇ ਸਫ਼ਲ ਹੋਣ ਉੱਤੇ ਸੁਨੇਹਾ ਦਿਸਾਇਆ ਜਾਵੇ:

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

ਉਦਾਹਰਣ 3

ਨਾਨ-ਸੂਚੀ ਵਿੱਚ ਨਿਵੇਦਨ ਨੂੰ ਲੋਡ ਕਰੋ ਜੋ ਲੇਖ ਦੇ ਬਾਹਰੀ ਪੱਖ ਵਿੱਚ ਲੋਡ ਹੋਣਗੇ:

HTML ਕੋਡ:

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery ਕੋਡ:

$("#links").load("/Main_Page #p-Getting-Started li");

ਹੋਰ TIY ਉਦਾਹਰਣ

AJAX ਬੇਨਤੀ ਬਣਾਉਣਾ ਅਤੇ ਉਸ ਬੇਨਤੀ ਰਾਹੀਂ ਸੰਦੇਸ਼ ਭੇਜਣਾ
AJAX ਬੇਨਤੀ ਰਾਹੀਂ data ਪੈਰਾਮੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਿਵੇਂ ਸੰਦੇਸ਼ ਭੇਜਣਾ ਹੈ。(ਇਹ AJAX ਟ੍ਰੇਨਿੰਗ ਵਿੱਚ ਦਿਸ਼ਾ ਦਿੱਤੀ ਗਈ ਹੈ。)
AJAX ਬੇਨਤੀ ਬਣਾਉਣਾ ਅਤੇ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
AJAX ਬੇਨਤੀ ਤੋਂ ਮਿਲੀ ਦਾਤਾ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਹੈ。
ਖਾਲੀ ਬੇਨਤੀ ਬਣਾਉਣਾ
AJAX ਬੇਨਤੀ ਵਿੱਚ ਖਾਲੀ ਬੇਨਤੀ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਹੈ (XMLHttpRequest ਪੈਰਾਮੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ)。