How to use jQuery .getJSON() Method to perform AJAX work

How to use jQuery .getJSON() Method to perform AJAX work

The jQuery getJSON Method (.getJSON()) is an AJAX method that is used to fetch JSON data using HTTP GET request.

jQuery getJSON Syntax

$(selector).getJSON(url,data,success(data,status,xhr))

Parameter Description
url Required.
The URL to send the request to.
data Optional.
The data to be sent to the server
success(result,status,xhr) Optional.
The callback function to run when the request is successful.

  • result – contains the data returned from the server.
  • status – the request status that can be – “success”, “notmodified”, “error”, “timeout”, or “parsererror”
  • xhr – the XMLHttpRequest object
You can also use .done() & .fail() deferred objects with .getJSON()
$.getJSON({
    url: "file.json"
}).done(function (result, status, xhr) {
    alert(result)
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
});

The .done() will be called when the AJAX request completes while .fail() will be called when the AJAX request fails.

jQuery also has a .load() method for making AJAX calls. If you don’t know it then kindly read jQuery Load Complete Guide for Beginners to Experts – Examples & Codes

jQuery getJSON – Fetching JSON file

I have a json file named product.json.

[
  {
    "Product": "Mini Skirt size 38",
    "color": "Brown",
    "Price": "$40.77"
  },
  {
    "Product": "Women Pant size 39",
    "color": "Black",
    "Price": "$21.45"
  },
  {
    "Product": "Men Coat size 47",
    "color": "Pink",
    "Price": "$101.50"
  }
]

Now with .getJSON() method I will show the file’s content in HTML format and inside a div element.

<div id="jsonData"></div>

$.getJSON({
    url: "product.json",
    success: function (result, status, xhr) {
        var table = $("<table><tr><th>Product</th><th>Color</th><th>Price</th></tr>");
        var tr;
        for (var i = 0; i < result.length; i++) {
            tr = $("<tr>");
            tr.append("<td>" + result[i].Product + "</td>");
            tr.append("<td>" + result[i].color + "</td>");
            tr.append("<td>" + result[i].Price + "</td>");
            tr.append("</tr>");
            table.append(tr);
        }
        table.append("</table>");
        $("#jsonData").html(table);
    }
});

fetch json

DEMO

jQuery getJSON – Fetching images from Flickr API

Here I will show how to fetch images from flickr API.

<div id="flickrData"></div>
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$.getJSON(flickerAPI, {
    tags: "nicole kidman",
    tagmode: "any",
    format: "json"
}).done(function (result, status, xhr) {
    $.each(result.items, function (i, item) {
        $("<img>").attr("src", item.media.m).appendTo("#flickrData");
        if (i === 5) {
            return false;
        }
    });
}).fail(function (xhr, status, error) {
    alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}); 

I have passed the optional data parameters (tags, tagmode, format) to the jQuery getJSON method.

I have searched for ‘nicole kidman’ and once the API send me the results in JSON then I am looping through them using jQuery Each Method

.

flickr api

Check the demo, the link is given below. You can also download the full source codes:

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "ASP.NET Core, jQuery, EF Core, SEO, jQuery, HTML" and more.