jQuery getJSON() method

This jQuery method is used to fetch the JSON data from the server using an AJAX HTTP GET request.

Syntax

Parameter Values

This method includes three parameter values in which one is mandatory, and others are optional. We must have to include the URL parameter to the getJSON() method. The parameter values of the getJSON() method are defined in the following table.

Parameter	Values
URL	It is the URL to which the request is sent. It is a mandatory parameter.
data	It is an optional parameter. It is the data sent to the server.
success(data, status, xhr)	This is also an optional parameter. It is a callback function that executes on the successful server request. It also has three parameters that are data, status, and xhr in which data contains the data returned from the server, status represents the request status like "success", "error", etc., and the xhr contains the XMLHttpRequest object.

Now, let's see a simple example of using the getJSON() method.

Example

In this example, we are fetching the JSON data from an external JSON file by using the getJSON() method. Here, there is an external JSON file named as sample.json that contains the details of a student.

We are using two parameters of the getJSON() method that are URL and the callback function.

The URL parameter is set to the value sample.JSON. We are using two parameters of the callback function that are data and status in which the first parameter holds the data of the requested page, and the second parameter holds the request status. In the output, we can see the data load from the server, and the status of the request is success.

We have to click the given button to fetch the data from the external JSON file.

sample.json

{
"name" : "John",
"age" : "23",
"rollno" : "11",
"standard" : "Post-Graduate"
}

Example2.html

<!DOCTYPE html>
<html>
<head>
<title> jQuery getJSON() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(event){
$.getJSON('sample.json', function(student,status) {
alert(" The followind data is fetched from the external .json file." + "\nName: " + student.name + "\nAge: " + student.age + "\nRoll.No.: " + student.rollno + "\nStandard: " + student.standard);
$('#data').append('<h3> Student Details </h3>');
$('#data').append('<p> Name: ' + student.name + '</p>');
$('#data').append('<p>Age : ' + student.age + '</p>');
$('#data').append('<p> Roll.No.: ' + student.rollno + '</p>');
$('#data').append('<p> Standard: ' + student.standard + '</p>');
$('#data').append('<p> Status: ' + status + '</p>');
});
});
});
</script>
</head>

<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the jQuery getJson() method </h3>
<p> Click the following button to fetch the data. </p>

<div id = "data" style = "background-color : lightgreen;"> </div>

<button> Click me </button>

</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, a dialog box will be displayed that contains the data as shown below -

After closing the dialog box, the data of the student will be displayed on the page, as shown in the following screenshot. In the following screenshot, we can see that the status of the request is Success.