jQuery.getJSON()

jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

מחזירה: jqXHR

תיאור: טוען נתונים JSON באמצעות שיטה GET.

ארגומנטים

jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

הוספה בגרסה: 1.0
השתנתה בגרסה: 1.5

url

מחרוזת

מחרוזת, מכילה URL שאליו נשלחת שאילתה.

data

מפה, מחרוזת

מפה או מחרוזת שנשלחת לשרת עם הבקשה.

success(data, textStatus, jqXHR)

Callback

פונקציה שמופעלת כל פעם אחרי טעינת הנתונים מוצלחת.

זו פונקציה מקוצרת של Ajax, ששווה ל:

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

הנתונים נשלחים לשרת מצורפים לכתובת URL כמחרוזת שאילתה. אם הערך של פרמטר הנתונים הוא אובייקט אם נתוני הפרמטר data הם אובייקט (מפה), הם ממומרים למחרוזת ו URL מקודד לפני שהם מצורפים ל 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 מעבירה נתונים שהתקבלו, שהם בדרך כלל אובייקט JavaScript או מערך, כפי שמוגדר במבנה של JSON, ומנתחת אותם שאמצעות שיטה $.parseJSON(). היא גם מעבירה מצב הבקשה.

החל מ jQuery 1.5, פונקציה של קריאה חוזרת success מקבלת אובייקט "jqXHR" (ב jQuery 1.4, היא קיבלה אובייקט XMLHttpRequest). עם זאת, מאז JSONP ובקשות חוצות דפדפנים של GET לא משתמשים בXHR, במקרים האלה פרמטרים jqXHR ו textStatus הנשלחים לפונקציה של קריאה חוזרת לא מוגדרים.

חשוב: החל מ jQuery 1.4, אם קובץ JSON מכיל שגיאת תחביר, הבקשה בדרך כלל תכשל בשקט. מסיבה זו הימנעו מעריכה ידנית נתונים של JSON. שJSON הוא פורמט של מחלף נתונים עם חוקי תחביר, החוקים האלה קשוחים יותר מאלה של סימון האובייקט של JavaScript.לדוגמה, כל השורות המוצגות ב JSON, אם הם תכונות או ערכים, חייבים להיות מוקפים במרכאות כפולות. עבור פרטים על פורמט JSON, ראו http://json.org/.

JSONP

אם URL מכיל מחרוזת "callback=?" (או דומה, כפי שהוגדרו על ידי צד שרת-API), הבקשה נחשבת במקום כמו JSONP. ליותר מידע ראו דיון על סוגי נתונים של jsonp ב $.ajax().

אובייקט jqXHR

החל מ jQuery 1.5, כל השיטות של jQuery Ajax מחזירות אובייקט מורחב של XMLHTTPRequest. זה אובייקט jQuery XHR, או "jqXHR", המוחזר על ידי $.get() מיישם את ממשק Promise, הוא נותן את כל המאפיינים, השיטות, ואת ההתנהגות של Promise (ראו אובייקט נדחה עבור מידע מלא). לנוחות ועקביות עם פונקציה קריאה חוזרת שמות, המשתמשים ב $.ajax(), הוא מספק שיטות .error(), .success() ו .complete(). השיטות האלה מקבלות ארגומנט של פונקציה המופעלת כאשר בקשה מסתיימת, ופונקציה מקבלת אותם ארגומנטים, בהתאם לשמות של פונקציה של קריאה חוזרת $.ajax().

ממשק Promise ב jQuery 1.5 גם מאפשר לשיטות jQuery Ajax, כולל $.getJSON(), לחבר פונקציות מרובות של קריאה חוזרת .success(), .complete() ו .error() על בקשה היחידה, ואף מקצה פונקציות של קריאה חוזרת האלה אחרי שבקשה כבר הסתיימה. אם בקשה כבר הסתיימה, פונקציה של קריאה חוזרת מופעלת מייד.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

דוגמאות

דוגמה 1

טוען ארבע התמונות האחרונות של החתול מ- Flickr JSONP API.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
});

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            if ( i == 3 ) return false;
          });
      });
  });
</script>

</head>
<body>
<div id="images">
</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

טוען נתונים JSON מ- test.js ומציג שם בהודעה מנתונים שהתקבלו JSON.

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

דוגמה 3

טוען נתונים JSON מ- test.js, מעביר נתונים נוספים, ומציג שם בהודעה מנתונים שהתקבלו JSON.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
    alert("JSON Data: " + json.users[3].name);
    });

דוגמה 4

מציג תוצאה של ניתוח דף pages.php כי מערך. מחבר Manuel Gonzalez.

var id=$("#id").attr("value");
$.getJSON("pages.php",{id:id},dates);

function dates(datos) {
    
  $("#list").html("Name:"+datos[1].name+"
"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}

האם מידע זה היה מועיל?

כן לא

jQuery.getJSON()

jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

ארגומנטים

jQuery.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )

JSONP

אובייקט jqXHR

דוגמאות

דוגמה 1

דוגמה 2

דוגמה 3

דוגמה 4

תגובות