الصفحة الرئيسية>دروس تصميم الويب>دروس جافا سكريبت

دعونا نتحدث عن Ajax في jQuery ونشرح طرقه الرئيسية بالتفصيل

الكاتب:Eve Cole وقت التحديث:2022-07-28 14:57:21

ثم قم بإنشاء صفحة فارغة جديدة (main.html)، بما في ذلك الزر الذي يقوم بتشغيل حدث Ajax، والمعرف "content"

المستخدم لعرض محتوى HTML الملحق (test.html).

<أتش تي أم أل>
<الرأس>
	<ميتا محارف = "utf-8">
	
	<العنوان>الرئيسي

<الجسم>
	
	
	

المحتوى الذي تم تحميله:

بعد ذلك قم بكتابة كود jQuery. بعد تحميل DOM، قم باستدعاء طريقة التحميل بالنقر فوق الزر لتحميل المحتوى في test.html إلى العنصر بالمعرف "content". الرمز كما يلي:

قبل تحميل

نتائج التشغيل

:

4.png

بعد التحميل:

5.png

2) قم بتصفية مستندات HTML التي تم تحميلها.

المثال أعلاه هو تحميل كل المحتوى الموجود في test.html إلى العنصر ذو المعرف "content" في main.html إذا كنت تريد تحميل محتوى معين فقط، فيمكنك استخدام Load(url.) محدد) لتحقيق.

ملاحظة: توجد مسافة بين عنوان url والمحدد.

على سبيل المثال، لتحميل محتوى العلامة p فقط في test.html، يكون الرمز كما يلي:

تشغيل النتائج

6.png

3) وضع النقل

يتم تحديد وضع نقل طريقة التحميل () تلقائيًا بناءً على بيانات المعلمة. إذا لم يتم تمرير أي معلمات، فسيتم استخدام أسلوب GET، وإلا فسيتم تحويله تلقائيًا إلى أسلوب POST.

// طريقة التحميل (url,fn)، بدون نقل المعلمات، طريقة GET $("#btn1").click(function(){
    $("#content1").load("test.html"، function(){
    	// شفرة
    })
})

// طريقة التحميل (url,fn)، هناك معلمات لتمريرها، طريقة POST $("#btn1").click(function(){
    $("#content1").load("test.html"، {الاسم: "peiqi"، العمر: "18"}، الوظيفة(){
    	// شفرة
    })
})

4) معلمات رد الاتصال

للعمليات التي يجب أن تستمر بعد اكتمال التحميل، توفر طريقة التحميل () وظيفة رد اتصال (رد الاتصال). تحتوي هذه الوظيفة على 3 معلمات تمثل "محتوى الطلب المرتجع" و"حالة الطلب". object"، الكود كما يلي:

$("#content1").load("test.html p"، function(responseText, textStates, XMLHttpRequest) {
   //responseText: المحتوى الذي تم إرجاعه بواسطة الطلب //textStates: حالة الطلب: خطأ نجاح مهلة غير معدلة 4 أنواع //XMLHttpRequest: كائن XMLHttpRequest})

; طالما أن الطلب مكتمل (مكتمل)، سيتم تشغيل وظيفة رد الاتصال (رد الاتصال).

3.

.

ز

ه

ر

(

)

طريقة و

طريقة .get() و

عادةً ما تحصل

على ملفات بيانات ثابتة من خادم الويب، إذا كنت بحاجة إلى تمرير بعض المعلمات إلى الصفحة الموجودة في الخادم، فيمكنك استخدامها

.

ز

ه

ر

(

)

طريقة و

طريقة .get() و

(أو طريقة $.ajax()).

يلاحظ:

.

ز

ه

ر

(

)

طريقة و

طريقة .get() و

يعد من الوظائف العامة في jQuery.

1) طريقة $.get()

تستخدم طريقة $.get() طريقة GET لتقديم طلبات غير متزامنة.

هيكل

معلمات

$.get(url, [data], [callback], [type]).

7.png

التطبيق

أدناه عبارة عن جزء من كود HTML لصفحة التعليق، والذي يقدم استخدام الأسلوب $.get(). الكود كما يلي:


التعليقات

الاسم:

المحتوى:

الصفحة التي تم إنشاؤها بواسطة هذا الرمز هي كما هو موضح في الشكل:

8.png

بعد ملء اسمك والمحتوى الخاص بك، يمكنك إرسال تعليقك.

أ. أولاً، عليك تحديد عنوان URL المطلوب.

$("#btn2").انقر(وظيفة(){
    $.get("test.php"، معلمة البيانات، وظيفة رد الاتصال)
})

ب. قبل الإرسال، قم بتمرير قيم الاسم والمحتوى إلى الخلفية كبيانات معلمة.

$("#btn2").انقر(وظيفة(){
    $.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, وظيفة رد الاتصال)
})

ج. إذا تلقى الخادم البيانات التي تم تمريرها وأعادها بنجاح، فيمكن عرض البيانات التي تم إرجاعها على الصفحة من خلال وظيفة رد الاتصال.

تحتوي وظيفة رد الاتصال للأسلوب $.get() على معلمتين فقط

function(){
  // البيانات: يمكن أن يكون المحتوى الذي تم إرجاعه مستندات XML، وملفات json، وأجزاء XHML، وما إلى ذلك. //textStatus: حالة الطلب: خطأ نجاح لم يتم تعديل المهلة 4 أنواع}

d. تمثل معلمة البيانات المحتوى الذي تم إرجاعه بواسطة الطلب، وحالة النص تمثل المعلمة حالة الطلب ولا يمكن استدعاء وظيفة رد الاتصال إلا عندما تكون البيانات ناجحة (يتم استدعاء التحميل () بغض النظر عن النجاح أو الفشل).

// طريقة $.get()$("#btn2").click(function(){
    $.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus==success){ //success
    		// شفرة
    		$(بيانات).appendTo("#msg")
    	}
    },
    "html")//نوع
})

ه

9.png

2) الطريقة $.post()

لها نفس البنية والاستخدام مثل الطريقة $.get()، ولكن لا تزال هناك الاختلافات التالية:

أ. ستمرر طريقة GET المعلمات بعد عنوان URL وسيتم تصفح البيانات يقوم الخادم بتخزينه مؤقتًا، بينما يتم إرسال طريقة POST إلى الخادم كمحتوى كيان لرسالة HTTP (أي ملفوفة في نص الطلب). يمكن ملاحظة أن أمان طريقة POST أعلى من أمان طريقة POST الحصول على الطريقة.

ب. أسلوب GET له حد لحجم البيانات المرسلة (عادة لا يزيد عن 2 كيلو بايت)، في حين أن أسلوب POST ليس له حد لحجم البيانات من الناحية النظرية.

ج. يتم الحصول على البيانات المنقولة بطريقة GET وطريقة POST بشكل مختلف من جانب الخادم. في PHP، يمكن الحصول على البيانات في وضع GET باستخدام "_GET[]"، بينما يمكن الحصول على البيانات في وضع POST باستخدام " _POST[]". يمكن الحصول على كلتا الطريقتين باستخدام "$_REQUEST[]".

د. سرعة الإرسال لطريقة GET أعلى من سرعة الإرسال لطريقة POST.

نظرًا لأنه يمكن الحصول على جميع البيانات المقدمة بواسطة طرق POST وGET
من

خلال $_REQUEST[]، فطالما تم تغيير وظيفة jQuery، يمكن تبديل البرنامج بين طلبات GET وطلبات POST.

طريقة النشر () $("#btn2").click(function(){
	$.post("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
    	if(textStatus==success){ //success
    		// شفرة
    		$(بيانات).appendTo("#msg")
    	}
    },
    "html")//نوع
})

بالإضافة إلى ذلك، عند تمرير طريقة التحميل () مع المعلمات، سيتم استخدام طريقة POST لإرسال الطلب. لذلك، يمكنك أيضًا استخدام طريقة التحميل () لإكمال نفس الوظيفة، ويكون الرمز كما يلي:

$("#btn2").click(function(){.
	$("#msg").load("test.php", {
    	"اسم المستخدم":$("#name").val(),
        "المحتوى":$("#content2").val()
    });
})

4.

.

ز

ه

ر

س

ج

ص

أنا

ص

ر

(

)

طريقة و

طريقة .getScript() و

$

في بعض الأحيان، ليس من الضروري تمامًا الحصول على جميع ملفات JavaScript المطلوبة عند تحميل الصفحة لأول مرة. على الرغم من أنه يمكنك إنشاء

$(document.createElement("script") ديناميكيًا.attr("src", "test.js").appendTo("head");
//Or $("