Updated April 7, 2023
Introduction to jQuery read JSON
The jQuery read JSON is performed with the getJSON() function to get the JSON data from the webserver using AJAX HTTP GET request. The jQuery getJSON() function is a built-in function in jQuery. The jQuery getJSON() function can be used to get and read the data from the server. The get() function is another function that we can also use to read the JSON data, which is also a built-in function in jQuery. The syntax of get() function is same as the getJSON() function.
The syntax of the jQuery getJSON() function –
$(selector).getJSON( URL, data, success( data, status, xhr ) );Parameters –
URL – This is not an optional parameter. It specifies the location or URL to which the request is sent to get the JSON data.
data – This is an optional parameter. It specifies the data sent to the server.
success( data, status, xhr ) – This is an optional parameter. It specifies the callback function which will be executed when the sent request is sent susses, it accepts three parameters data, status, and xhr. The data parameter represents the data received from the server. The status parameter represents whether the request is success, error, and all. The last parameter xhr represents XMLHttpRequest object.
Return value –
The return value of this function is XMLHttpRequest object.
Working of the jQuery read JSON
The jQuery read JSON with getJSON(), the getJSON() function accepts three parameters. Suppose we have a JSON data at the server side and we need to read that JSON data. So we can use the getJSON() function to read JSON data as $.get( ‘http://time.jsontest.com’, function(data, status) { alert( data ); });”, which get the JSON data from the given URL and then display the read JSON data by using the alert function.
Examples
Here are the following examples mention below
Example #1
Example of jQuery read JSON to read JSON data from given URL using the getJSON() function –
Code:
The JSON data to be read from the given URL ‘http://time.jsontest.com’ is –
{
"date" : "03-08-2021",
"milliseconds_since_epoch" : 1615205094742,
"time" : "12:04:54 PM"
}
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery read json </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( 'http://time.jsontest.com', function(data,status) {
$( '#js' ).append('<h3> The json data details is : </h3>');
$( '#js' ).append('<p> Date : ' + data.date + '</p>');
$( '#js' ).append('<p> Milliseconds_since_epoch : ' + data.milliseconds_since_epoch + '</p>');
$( '#js' ).append('<p> Time: ' + data.time + '</p>');
$( '#js' ).append('<p> The request status is : ' + status + '</p>');
});
});
});
</script>
</head>
<body>
<h2> This is an example for jQuery read json : </h2>
<p> Click below button to read json data from the given location. </p>
<div id = "js" style = "background-color : lightblue;"> </div>
<button> Click to read json data </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the “button” element is created and on click of which the getJSON() function gets execute. The getJSON() function is reading the JSON data from the given URL and displaying the same data by using the code as “$.getJSON( ‘http://time.jsontest.com’, function(data, status) { $(‘#js’).append(‘<h3> The json data details is : </h3>’); });”. So, if we click on the button the click link event trigger and display the read JSON data, as we can see in the above output.
Example #2
Example of jQuery read JSON to read JSON data from given URL using the get() function –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> This is an example for jQuery read json </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){
$.get( 'http://time.jsontest.com', function( data, status ) {
alert( " The following data is fetched from the http://time.jsontest.com URL." + "\n The Date is : " + data.date + "\n The milliseconds_since_epoch is : " + data.milliseconds_since_epoch + "\n " );
});
});
});
</script>
</head>
<body>
<h2> This is an example for jQuery read json : </h2>
<p> Click below button to read json data from the given location. </p>
<div id = "js" style = "background-color : lightblue;"> </div>
<button> Click to read json data </button>
</body>
</html>An output of the above code is –
Once we click on the first paragraph, the output is –
In the above code, the “button” element is created and on click of which the get() function gets to execute. The get() function is reading the JSON data from the given URL and displaying the same data by using the code as “$.getJSON( ‘http://time.jsontest.com’, function(data, status) { alert(“ The Date is : ” + data.date+); });”. So, if we click on the button the click link event trigger and alert the read JSON data, as we can see in the above output.
Conclusion
The jQuery read JSON can perform by using either getJSON() function or get() function, both of the functions are built in function in jQuery and both of them returns the XMLHttpRequest object.
Recommended Articles
This is a guide to jQuery read JSON. Here we discuss the Working of the jQuery read JSON and Examples along with the codes and outputs. You may also look at the following article to learn more –
