Home » jQuery getJSON() method

jQuery getJSON() method

by Online Tutorials Library

jQuery getJSON() method

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


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.


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.



Test it Now


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

jQuery getJSON() method

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

jQuery getJSON() method

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.

jQuery getJSON() method

You may also like