طريقة load() في jQuery ajax

دليل مرجعي لjQuery Ajax

مثال

استخدم طلب AJAX لتغيير نص عنصر div:

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

جرب بنفسك

يمكنك العثور على أمثلة TIY المزيدية في قاعدة البيانات في نهاية الصفحة

التعريف والاستخدام

يستخدم طريقة load() من AJAX لتحميل البيانات من الخادم، ووضع البيانات المعدة في العنصر المحدد.

ملاحظة:يوجد أيضًا اسم 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() بتعيين محتويات العنصر المميز للبيانات التي يتم استعادتها. هذا يعني أن معظم استخدامات هذه الطريقة ستكون بسيطة جداً:

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

إذا تم تقديم دالة التتبع، سيتم تنفيذ هذه الدالة بعد إكمال معالجة التتبع:

$("#result").load("ajax/test.html", function() {
  alert("تم تنفيذ تحميل.");
});

في المثالين السابقين، إذا لم يحتوي المستند الحالي على معرف "result"، لن يتم تنفيذ طريقة .load().

إذا كانت البيانات المقدمة هي عمود، يتم استخدام طريقة POST؛ وإلا يتم استخدام طريقة GET.

تحميل قطعة الصفحة

يسمح لنا طريقة .load()، على عكس $.get()، بتحديد جزء معين من المستند المremote الذي سيتم إدراجه. يتم تحقيق هذا من خلال سيناريو خاص للعنوان. إذا كان هذا النص يحتوي على مسافات، فإن النص الذي يتبع المسافة الأولى هو محدد لتحديد المحتوى المميز من قبل 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

تحميل جزء التوجيه الجانبي للرسالة إلى قائمة غير مرتبة:

كود HTML:

<b>روابط jQuery:</b>
<ul id="links"></ul>

كود jQuery:

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

مزيد من أمثلة TIY

إنشاء طلب AJAX وإرسال بيانات عبر هذا الطلب
كيفية إرسال بيانات باستخدام معامل data من خلال طلب AJAX. (تم شرح هذا المثال في درس AJAX.)
إنشاء طلب AJAX واستخدام الدالة التراجعية
كيفية التعامل مع نتائج البيانات المرسلة من طلب AJAX باستخدام معامل function.
إنشاء طلب AJAX يحتوي على خطأ
كيفية استخدام معامل function للتعامل مع الأخطاء في طلبات AJAX (استخدام معامل XMLHttpRequest).

دليل مرجعي لjQuery Ajax