يقوم الأسلوب jQuery.post() بإنشاء طلب HTTP POST لاسترداد البيانات من الخادم.

صيغة أسلوب jQuery.post()

jQuery.post(url [, data ] [, Success(data, textStatus, jqXHR) ] [, dataType ])

• url - سلسلة تحتوي على عنوان URL للطلب لإرسال البيانات.
• البيانات - سلسلة أو كائن عادي ( مجموعة النقابي)، البيانات المراد إرسالها إلى الخادم.
• Success(data, textStatus, jqXHR) - وظيفة رد الاتصال، يتم استدعاؤها في حالة نجاح الطلب.
• dataType - سلسلة، نوع البيانات المتوقع من الخادم. بشكل افتراضي، يحاول jQuery الكشف التلقائي عن (xml، json، script أو html).

المثال أدناه هو المعادل jQuery.ajax() لـ jQuery.post():

$.ajax(( النوع: "POST"، عنوان url: url، البيانات: البيانات، النجاح: النجاح، نوع البيانات: نوع البيانات ));

يتم تمرير بيانات الإرجاع إلى وظيفة رد الاتصال الناجحة، والتي يمكن أن تكون عنصر جذر XML، أو سلسلة نصية، أو ملف JavaScript، أو كائن JSON، اعتمادًا على نوع MIME للاستجابة. يتم أيضًا نقل الحالة النصية للاستجابة.

بدءًا من jQuery 1.5، يتم تمرير كائن jqXHR إلى دالة النجاح.

يتم تعيين معظم تطبيقات معالج النجاح على النحو التالي:

JQuery.post("ajax/test.html", function(data) ( $(".result").html(data); ));

يطلب هذا المثال تعليمات برمجية بتنسيق HTML ويقوم بإدراجها في الصفحة في الموقع المحدد.

لا يتم أبدًا تخزين البيانات التي يستقبلها التابع jQuery.post() مؤقتًا، لذلك سيتم تجاهل ذاكرة التخزين المؤقت ومعلمات ifModified للأسلوب jQuery.ajaxSetup().

كائن jqXHR.

منذ الإصدار 1.5 من jQuery، قامت جميع أساليب AJAX بإرجاع كائن XMLHttpRequest ممتد. هذا كائن jQuery XHR، أو jqXHR للاختصار، يتم إرجاعه بواسطة jQuery.post()‎ الذي يقوم بتنفيذ واجهة Promise، مما يمنحه جميع خصائص Promise وأساليبه وسلوكه (راجع الكائن المؤجل للحصول على معلومات إضافية). jqXHR.done() (بدلاً من النجاح)، jqXHR.fail() (بدلاً من الخطأ)، وjqXHR.always() (بدلاً من الاكتمال) تأخذ وسيطة إلى دالة يتم استدعاؤها عند اكتمال الطلب. للحصول على معلومات حول وسيطات هذه الوظيفة، راجع قسم وثائق jQuery.ajax() .

تسمح واجهة Promise أيضًا لطرق AJAX في jQuery، بما في ذلك JQuery.post()، بإنشاء سلسلة من jqXHR.done()، jqXHR.fail()، jqXHR.always()، أي. طرق رد اتصال متعددة لكل طلب، وحتى تعيين هذه الوظائف بعد اكتمال الطلب. إذا كان الطلب قد اكتمل بالفعل، فسيتم تنفيذ الطرق المعينة حديثًا على الفور.

// قم بتعيين الطلبات مباشرة بعد الطلب // واحفظ كائن jqXHR لهذا الطلب. var jqxhr = $.get("example.php", function() ( تنبيه("success"); )) .done(function() ( تنبيه("النجاح الثاني"); )) .fail(function() ( تنبيه("خطأ" )).always(function() ( تنبيه("انتهى"); )); // قم بتنفيذ بعض التعليمات البرمجية هنا... // أضف معالج إكمال طلب جديد لطلب مكتمل بالفعل jqxhr.always(function())(alert("Second Finished");));

معالجات مهملة.

لقد تم إهمال الأساليب jqXHR.success() وjqXHR.error() وjqXHR.complete() منذ jQuery 1.8. ستتم إزالة هذه الأساليب في المستقبل. استخدم jqXHR.done() وjqXHR.fail() وjqXHR.always() بدلاً من ذلك، على التوالي.

ملاحظة إضافية.

• نظرًا للقيود الأمنية للمتصفح، فإن معظم طلبات AJAX مقيدة بنفس سياسة الأمان. لا يمكن لطلبات AJAX استرداد المعلومات من المجالات أو النطاقات الفرعية أو البروتوكولات الأخرى بنجاح.
• إذا حدث خطأ أثناء طلب jQuery.get()، فلن يحدث ذلك بشكل ملحوظ حتى يتم استدعاء الأسلوب العام jQuery.ajaxError(). البديل لمعالجة الأخطاء، اعتبارًا من الإصدار 1.5 من jQuery، هو كائن jqXHR الذي يتم إرجاعه بواسطة jQuery.get().

أمثلة

مثال: تم تقديم طلب إلى صفحة test.php، ولكن لم تتم معالجة أي بيانات.

JQuery.post("test.php");

مثال: طلب إلى صفحة test.php مع إرسال بعض البيانات (دون معالجة البيانات المستلمة).

JQuery.post("test.php"، (الاسم: "جون"، الوقت: "2 ظهرًا" ));

مثال: يتم نقل مجموعة من البيانات إلى الخادم (دون معالجة البيانات المستلمة).

JQuery.post("test.php", ("choices": ["Jon", "Susan"]));

مثال: إرسال بيانات النموذج باستخدام طلب Ajax.

JQuery.post("test.php", jQuery("#testform").serialize());

مثال: نبلغك باستلام البيانات بنجاح من صفحة test.php (HTML أو XML، اعتمادًا على البيانات المستلمة).

JQuery.post("test.php", function(data) ( تنبيه("البيانات المحملة: " + data); ));

مثال: نبلغك باستلام البيانات بنجاح من صفحة test.cgi مع إرسال بيانات إضافية (HTML أو XML، اعتمادًا على البيانات المستلمة).

JQuery.post("test.php", ( الاسم: "جون"، الوقت: "2 ظهرًا" )) .done(function(data) ( تنبيه("تم تحميل البيانات: " + data); ));

مثال: احصل على محتويات صفحة test.php التي تم إرجاعها بتنسيق JSON() وأخرجها إلى الصفحة.

JQuery.post("test.php"، function(data) ( $("body").append("Name: " + data.name) // John .append("Time: " + data.time); / /2 م)، "json");

مثال: إرسال بيانات النموذج باستخدام طلب Ajax وإدراج البيانات المستلمة في div.

// إضافة معالج إرسال النموذج $("#searchForm").submit(function(event) ( // تعطيل الوظيفة القياسية لمعالج النموذج events.preventDefault(); // الحصول على بعض البيانات من عناصر الصفحة var $form = $(this) , term = $form.find("input").val(), url = $form.attr("action"); // إرسال البيانات إلى الخادم بطلب POST var posting = $.post (url, ( s: term )); // أدخل النتائج المستلمة posting.done(function(data) ( var content = $(data).find("#content"); $("#result").empty ().إلحاق(محتوى) );

سأخبرك في هذه المقالة بكيفية كتابة JavaScript وAjax خالصًا دون استخدام المكتبات.

Ajax هي تقنية تُستخدم مع JavaScript. باستخدام Ajax، يمكنك إرسال طلبات GET وPOST دون تحديث الصفحة.

أولا، نحن بحاجة إلى فهم كيفية عمل أجاكس. يعمل Ajax في JavaScript باستخدام وظيفة قياسية XMLHttpRequest، ولكن في IE تحتاج إلى استخدام وظيفة ActiveXObject ("Microsoft.XMLHTTP").

سأريكم بأمثلة كيف يعمل كل شيء.

لنبدأ.

تحتاج إلى التحقق من كائن Ajax لجعل البرنامج النصي عبر المتصفح.

هنا هو رمز التحقق:

فار م = (); // هنا نقوم بإنشاء كائن لإنشاء الأساليب والخصائص. M._xhr = function())(حاول (this.a = new ActiveXObject("Msxml2.XMLHTTP");) قبض (e) (حاول (this.a = new ActiveXObject("Microsoft.XMLHTTP");) قبض ( E ) (this.a = false;)) if(!this.a && typeof XMLHttpRequest!="unified") ( this.a = new XMLHttpRequest();)return this.a;)
ثم تحتاج إلى إنشاء عدة وظائف لتبسيط التعليمات البرمجية وجعلها أكثر ملاءمة. إليك الكود:

M._d = document; M._func = function(obj) (إرجاع Object.prototype.toString.call(obj) === ""; ) M._array = function(obj) ( إرجاع Object.prototype.toString.call(obj) === ""; ) M._ge_by_tag = function(id)( this.p = M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do(return this.p;this .count++;)while(this.count = 200 && r.status< 300) { this.text = r.responseText;if(d.onDone) d.onDone(this.text, r); else if(d.onJsonDone) d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = ""; }else {alert(r.status);}}}}}
الآن أنت بحاجة إلى فهم الكود:

R.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");r.setRequestHeader("X-Requested-With", "XMLHttpRequest");
هذا الخط يعني أننا نستخدم اياكس.
إضافي.

R.open("POST", link, true); r.send(ف);
ويقوم هذا المعالج بفتح طلب مع الخادم، حيث يرسل الإرسال البيانات.
هذا الرمز مخصص لطلب POST، ولكن بالنسبة لطلب GET، يجب عليك تغييره قليلاً. كل ما تحتاجه هو عدم إرسال البيانات باستخدام الإرسال. لإرسال طلب GET وبياناته، ما عليك سوى إضافة "+"؟"+q" بعد الرابط المفتوح. هنا نرسل البيانات بنص واضح. على سبيل المثال:

R.open("GET", link+"؟"+q, true); r.send(null); // اكتب فارغة هنا. لأنه لا يوجد شيء يحتاج إلى إرسالها.
test.php?text=أهلا بالعالم

هذا كل شيء مع الكود. الآن كيفية استخدام الكود.

هنا مثال:

اختبار تجريبي window.onload = function())( M.get("/test.php",( // M.post أو M.get query:(text:"hello"), // قيمة الاستعلام onDone:function( a )( // إذا كان كل شيء على ما يرام، فاعرض النتيجة. M._ge_by_id("result").innerHTML = a; ), onFail:function(a)( // وإذا لم يكن الأمر كذلك، فاعرض تنبيه الخطأ(" خطأ")؛ ) ))؛
هناك أيضًا خيار تحويل النتيجة إلى JSON.
إليك الكود:

آخر تحديث: 11/1/2015

على عكس طلبات GET، يتم نقل بيانات طلبات POST ليس في سطر الطلب، ولكن في نصها. من الأمثلة الشائعة على مثل هذه الطلبات إرسال بيانات النموذج إلى الخادم.

يتم استخدام طريقة النشر لإرسال طلبات POST. يشبه إعلانه واستخدامه بشكل عام طريقة get. يقبل المعلمات التالية:

url: معلمة مطلوبة تحتوي على عنوان المورد الذي سيصل إليه الطلب

البيانات: معلمة اختيارية تحتوي على كائن أو سلسلة جافا سكريبت بسيطة سيتم إرسالها إلى الخادم مع الطلب

Success(data, textStatus, jqXHR): معلمة اختيارية - وظيفة رد اتصال سيتم تنفيذها عند نجاح الطلب. يمكن أن يستغرق الأمر ثلاث معلمات: البيانات - البيانات المستلمة من الخادم، وحالة النص - حالة الطلب، وjqXHR - كائن jQuery خاص يمثل نسخة موسعة من كائن XMLHttpRequest.

dataType: معلمة اختيارية تحتوي على نوع البيانات كسلسلة، مثل "xml" أو "json"

عند الإخراج، يُرجع التابع post كائن jqXHR.

مثال الاستخدام:

$.post("ajax.php", ("login": "1111", "password" : "2222"), function(data) ( $("#news").html(data); ));

في في هذه الحالةننقل كلمة المرور ونسجل الدخول كبيانات. يمكننا على الخادم تلقي البيانات وإرسال الرد للمستخدم:

نظرًا لأن طلب النشر يُستخدم غالبًا عند إرسال بيانات النموذج، فإننا نستخدم النموذج من جانب العميل:

$("#loginForm").submit(function(event) ( // منع تقديم النموذج العادي events.preventDefault(); $.post("ajax.php", ("login":$("#login"). val(), "password" : $("#password").val()), function(data) ( $("#result").html(data); ));

لذا، جزء الخادمالذي سيصل إليه النموذج - ملف ajax.php - يظل كما هو. فقط في هذه الحالة، الآن بالنسبة لمعلمة البيانات في طريقة النشر، نأخذ البيانات من الحقول الموجودة في هذا النموذج.

يرجى ملاحظة أننا نحظر تقديم النموذج العادي (event.preventDefault();)، وإلا فستكون لدينا عملية إعادة توجيه.

تسلسل النموذج

نظرًا لأن النماذج لا تقتصر غالبًا على حقلين، فمن الأسهل استخدام تسلسل النماذج. يتم إجراء التسلسل باستخدام طريقة التسلسل ونتيجة لذلك يتم إنشاء كائن جافا سكريبت، حيث تتوافق الخصائص مع حقول النموذج. والقيم المخزنة بواسطة هذه الخصائص هي نفس قيم حقول النموذج المقابلة.

لذلك، دعونا نطبق تسلسل النموذج:

$("#loginForm").submit(function(event) ( // منع تقديم النموذج العادي events.preventDefault(); $.post("ajax.php", $("#loginForm").serialize(), وظيفة (بيانات) ( $("#result").html(data); ));

على عكس المثال السابق، لدينا اختلافان هنا. أولاً، لاحظ أن حقول الإدخال لها سمة اسم. عند تحديد معلمة البيانات، نقوم بإجراء تسلسل لبيانات النموذج من خلال طريقة التسلسل: $("#loginForm").serialize() . في هذه الطريقةيتم تمرير المعلمات إلى نص الطلب. علاوة على ذلك، فإن أسماء المعلمات هي قيم سمات الاسم لحقول الإدخال. وقيم المعلمات هي القيم المقابلة التي يتم إدخالها في الحقول النصية.

وبالتالي مع باستخدام PHPيمكننا استخراج هذه القيم: $login=$_POST["login"] .

JQuery هي مكتبة جافا سكريبت هدفها "الكتابة أقل وبذل المزيد من الجهد". من السهل الاتصال بموقعك على jQuery والبدء في استخدامه. تسهل jQuery استخدام جافا سكريبت على موقعك.

يقوم jQuery بإزالة مجموعة كاملة من الصفوف كود جافا سكريبت، ويسمح لك بتنفيذ كسر الأسطر هذا باستخدام طريقة واحدة فقط.

ما هو اجاكس؟

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

ماذا عن jQuery وAJAX؟

يوفر الجمع بين jQuery وAJAX وظائف قوية. باستخدام jquery وajax، يمكنك تقديم طلب وتلقي المعلومات بتنسيقات متنوعة، بما في ذلك XML وHTML وحتى النص العادي. يمكنك استخدام تنسيق JSON لتبادل البيانات. يمكننا استخدام البيانات الواردة عبر طلب اياكس في صفحة HTML الخاصة بنا.

تجعل jQuery المتصفح الحالي Ajax API أكثر قوة وأسهل في الاستخدام. إنشاء مكالمات اياكس بالطريقة المعتادةيعد استخدام جافا سكريبت أمرًا صعبًا بعض الشيء: حيث يتعين عليك مراعاة ذلك متصفحات مختلفةهناك حاجة إلى أساليب مختلفة لإنشاء كائن XMLHttpRequest. بالإضافة إلى ذلك، يصبح إرسال البيانات من النماذج، على سبيل المثال، أكثر صعوبة إذا كنت تستخدم جافا سكريبت العادي لاستدعاء أجاكس.

يوفر jQuery وظائف بسيطة وقوية تعمل على توسيع أساليب AJAX الخاصة بجافا سكريبت وتوفر نهجًا أكثر مرونة.

سأوضح لك في هذه المقالة القصيرة كيفية استخدام jQuery وAJAX في PHP بسيطاستمارة . لنبدأ... لاستخدام jQuery وAJAX، سنحتاج إلى ملفين، الملف الأول سيحتوي على كود html/php الذي سيتم من خلاله تقديم طلب ajax. وفي الملف الثاني سنقوم بمعالجة طلب الأجاكس وإرجاع النتيجة إلى الصفحة الأولى.

الخطوة 1: قم بإنشاء ملف school.php والصق الكود التالي فيه:

في الكود أعلاه نحصل على اسم الطالب ورقمه وباستخدام jquery و ajax نرسلهم إلى التفاصيل.php.

دالة getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( type: "POST", url: " التفاصيل .php"، البيانات: (fname:name، id:rno) )).done(function(result) ( $("#msg").html(" عنوان القائمة رقم " +rno +" هو "+result )) ؛

اسمك:
رقم اللفة:

الخطوة 2: قم بإنشاء ملفdetails.php ووضع الكود التالي فيه:

في الكود أعلاه نحصل على عنوان الطالب باستخدام الرقم التسلسلي واسمه.

ل هذا المثالسوف تحتاج إلى إنشاء قاعدة بيانات المدرسة وجدول الطلاب. يحتوي جدول الطالب على حقول مسماة رقم سريوالعنوان.

أتمنى أن تجد هذه المقالة مفيدة.

jQuery.post(url [, data] [, Success(data, textStatus, jqXHR)] [, dataType])

عنوان URL
النوع: سلسلة
العنوان الذي يتم إرسال الطلب إليه.

بيانات
النوع: كائن أو سلسلة
البيانات المرسلة إلى الخادم ككائن (مفتاح: قيمة) أو سلسلة.

النوع: وظيفة
دالة يتم استدعاؤها عند اكتمال طلب Ajax بنجاح.

نوع البيانات
النوع: سلسلة
نوع البيانات المتوقعة كاستجابة من الخادم. افتراضيًا، ستحدده jQuery بنفسها.

خيارات:

url - العنوان الذي تم إرسال الطلب إليه.
البيانات - البيانات المرسلة إلى الخادم في شكل خريطة (مفتاح: مجموعات القيم) أو تنسيق سلسلة
النجاح (البيانات، textStatus، jqXHR) - وظيفة يتم استدعاؤها عند إكمال طلب ajax بنجاح.
نوع البيانات - نوع البيانات المتوقعة من الخادم. افتراضيًا، ستحدده jQuery بنفسها.

$.post() يعادل:

$.ajax(( النوع: "POST"، عنوان url: url، البيانات: البيانات، النجاح: النجاح، نوع البيانات: نوع البيانات ));

تتلقى وظيفة رد الاتصال الناجحة استجابة من الخادم، والتي يمكن أن تكون في شكل XML، أو سلسلة، أو ملف جافا سكريبتأو كائن JSON، اعتمادًا على نوع MIME للاستجابة. يتم وضع هذه القيمة أيضًا في حالة الاستجابة.

منذ الإصدار 1.5، تقبل وظيفة رد الاتصال الناجحة كائن jqXHR (في الإصدارات السابقةكائن XMLHttpRequest). الاستخدام الكلاسيكي للطريقة:

$.post("ajax/test.html", function(data) ( $(".result").html(data); تنبيه("اكتمل التنزيل."); ));

يقدم هذا الرمز طلبًا لـ ملف HTMLويعرض محتوياته.

الصفحات المستلمة نتيجة لطلب POST لا يتم تخزينها مؤقتًا تحت أي ظرف من الظروف.

كائن jqXHR

منذ الإصدار 1.5، يُرجع $.post() كائن jqXHR الذي ينفذ الواجهة المؤجلة، مما يسمح بتحديد معالجات إضافية. بالإضافة إلى أساليب الكائنات المؤجلة القياسية .done() و .fail() و .then()، والتي يمكن استخدامها لتثبيت المعالجات، ينفذ jqXHR نسخها: .success() و .error() و .complete() . يتم ذلك للامتثال للأسماء المعتادة للطرق التي يتم من خلالها تثبيت معالجات تنفيذ طلبات ajax.

// إطلاق طلب اياكس، وتثبيت معالجات الأحداث. // سنقوم بتخزين الكائن الذي تم إرجاعه بواسطة الأسلوب $.get في المتغير jqxhr لاستخدامه مرة أخرى var jqxhr = $.post("example.php", function() ( تنبيه("success"); )) .done( function() ( تنبيه( "النجاح الثاني"); )).fail(function() ( تنبيه("خطأ"); )).always(function() ( تنبيه("انتهى"); )); // تثبيت معالج إكمال طلب آخر jqxhr.always(function())( تنبيه("Second Finished"); ));

ملاحظة حول الأساليب المهملة

تم إهمال وظائف النتائج العكسية المقدمة في jQuery 1.5 في الإصدار 1.8. يجب الآن استبدال jqXHR.success() وjqXHR.error() وjqXHR.complete() بـ jqXHR.done() وjqXHR.fail() وjqXHR.always().

أمثلة

قم بتقديم طلب إلى test.php، متجاهلاً الرد:

$.post("test.php");

قم بتقديم طلب إلى test.php، وقم بتمرير البيانات، وتجاهل الرد:

$.post("test.php", ( الاسم: "جون"، الوقت: "2 ظهرًا" ));

أرسل مجموعة من البيانات إلى الخادم، متجاهلاً الاستجابة:

$.post("test.php", ( "choices": ["Jon", "Susan"]));

معالجة الاستجابة من الخادم (HTML أو XML اعتمادًا على ما جاء):

$.post("test.php", function(data) ( تنبيه("البيانات المحملة: " + data); ));

قم بتقديم طلب إلى test.cgi، وإرسال البيانات، ومعالجة الاستجابة (HTML أو XML اعتمادًا على ما تم استلامه):

$.post("test.cgi", ( الاسم: "جون"، الوقت: "2 ظهرًا" )) .done(function(data) ( تنبيه("تم تحميل البيانات: " + data); ));

تلقي استجابة من الخادم بتنسيق JSON وعرضها على الصفحة ():

$.post("test.php", function(data) ( $("body").append("Name: " + data.name) // John .append("Time: " + data.time); / /2 م)، "json");

إرسال نموذج مع طلب POST وعرض النتيجة في div

$.ajax(( /* إرفاق حدث الإرسال بالنموذج */ $("#searchForm").submit(function(event) ( /* تعطيل إرسال النموذج القياسي */ events.preventDefault(); /* جمع البيانات من عناصر الصفحة : */ var $form = $(this)، term = $form.find("input").val(), url = $form.attr("action"); /* إرسال البيانات باستخدام طريقة POST */ var posting = $.post(url, ( s: term )); /* ضع النتيجة في div */ posting.done(function(data) ( var content = $(data).find("#content "); $(" #result").empty().append(content); )); ));