jQuery 3.3

jQuery.getJSON()




jquery

jQuery.getJSON (url [، data] [، success]) Returns: jqXHR

الوصف: قم بتحميل بيانات JSON-encoded من الخادم باستخدام طلب GET HTTP.

هذه اختصار دالة Ajax ، وهو ما يعادل:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

يتم إلحاق البيانات التي يتم إرسالها إلى الخادم بعنوان URL كسلسلة استعلام. إذا كانت قيمة معلمة data كائنًا عاديًا ، فسيتم تحويلها إلى سلسلة ويتم ترميزها قبل أن يتم إلحاقها بعنوان URL.

ستحدد معظم التطبيقات معالج نجاح:

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });
 
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

يعتمد هذا المثال ، بالطبع ، على بنية ملف JSON:

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

باستخدام هذا الهيكل ، يقوم المثال بالمرور عبر البيانات المطلوبة ، ويبني قائمة غير مرتبة ، ويضيفها إلى النص.

يتم تمرير رد الاتصال success البيانات التي تم إرجاعها ، والتي عادة ما تكون كائن جافا سكريبت أو صفيف كما هو محدد بواسطة بنية JSON ويتم تحليلها باستخدام طريقة $.parseJSON() . يتم تمريره أيضا حالة النص للاستجابة.

اعتبارًا من jQuery 1.5 ، يتلقى الدالة رد الاتصال success كائن "jqXHR" (في jQuery 1.4 ، تلقي الكائن XMLHttpRequest ). ومع ذلك ، بما أن JSONP وطلبات GET عبر النطاقات لا تستخدم XHR ، ففي هذه الحالات تكون jqXHR تم تمريرها إلى رد الاتصال بنجاح غير محددة.

هام: اعتبارًا من jQuery 1.4 ، إذا احتوى ملف JSON على خطأ في بناء الجملة ، فغالبًا ما يفشل الطلب بصمت. تجنب التعديل اليدوي المتكرر لبيانات JSON لهذا السبب. JSON هو تنسيق تبادل البيانات مع قواعد بناء الجملة التي هي أكثر صرامة من تلك الموجودة في تدوين حرفية كائن جافا سكريبت. على سبيل المثال ، يجب تضمين جميع السلاسل الممثلة في JSON ، سواء كانت خصائص أو قيم ، في علامات اقتباس مزدوجة. للحصول على تفاصيل حول تنسيق JSON ، راجع http://json.org/ .

JSONP

إذا كان عنوان URL يتضمن السلسلة "callback =؟" (أو ما شابه ، كما هو محدد بواسطة واجهة برمجة التطبيقات من جانب الخادم) ، يتم التعامل مع الطلب على أنه JSONP بدلاً من ذلك. راجع مناقشة نوع البيانات jsonp في $.ajax() لمزيد من التفاصيل.

كائن jqXHR

اعتبارًا من jQuery 1.5 ، تقوم كافة أساليب jQuery's Ajax بإرجاع مجموعة شاملة من كائن XMLHTTPRequest . يؤدي هذا الكائن jQuery XHR ، أو "jqXHR" ، الذي يتم إرجاعه بواسطة $.getJSON() تنفيذ واجهة Promise ، ويعطيها جميع خصائص وأساليب وسلوك الوعد (راجع الكائن المؤجل للحصول على مزيد من المعلومات). jqXHR.done() (للنجاح) ، jqXHR.fail() (للخطأ) و jqXHR.always() (للإكمال ، سواء كان النجاح أو الخطأ ؛ تمت إضافتها في jQuery 1.6) ، تأخذ الطرق الوسيطة الدالة التي تسمى عند الطلب ينتهي. للحصول على معلومات حول الوسائط التي تتلقاها هذه الدالة ، راجع قسم كائن jqXHR في وثائق $.ajax() .

تتيح واجهة Promise في jQuery 1.5 أيضًا أساليب Ajax الخاصة بـ jQuery ، بما في ذلك $.getJSON() ، لإجراء .done() متعددة .done() و .always() و .fail() على طلب واحد ، وحتى لتعيين هذه الاستدعاءات بعد قد اكتمل الطلب. إذا كان الطلب اكتمل بالفعل ، يتم تشغيل رد الاتصال على الفور.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

إشعار الإهمال

تتم jqXHR.success() jqXHR.error() jqXHR.complete() وطرق رد الاتصال jqXHR.complete() اعتبارًا من jQuery 3.0 . يمكنك استخدام jqXHR.done() و jqXHR.fail() و jqXHR.always() بدلاً من ذلك.

ملاحظات إضافية:

  • نظرًا لقيود أمان المتصفح ، تخضع معظم طلبات "Ajax" لنفس سياسة الأصل ؛ لا يمكن للطلب استرداد البيانات بنجاح من مجال أو مجال فرعي أو منفذ أو بروتوكول مختلف.
  • لا تخضع طلبات Script و JSONP لنفس قيود السياسة الأصلية.

أمثلة:

لتحميل أحدث أربع صور لجبل Rainier من Flickr JSONP API.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="images"></div>
 
<script>
(function() {
  var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();
</script>
 
</body>
</html>

عرض:

تحميل بيانات JSON من test.js والوصول إلى اسم من بيانات JSON التي تم إرجاعها.

$.getJSON( "test.js", function( json ) {
  console.log( "JSON Data: " + json.users[ 3 ].name );
 });

حمّل بيانات JSON من test.js ومررت بمزيد من البيانات ، ثم ادخل إلى اسم من بيانات JSON التي تم إرجاعها. في حالة حدوث خطأ ، قم بتسجيل رسالة خطأ بدلاً من ذلك.

$.getJSON( "test.js", { name: "John", time: "2pm" } )
  .done(function( json ) {
    console.log( "JSON Data: " + json.users[ 3 ].name );
  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
});