Describe getJSON() method in JQuery.

The getJSON() method of jQuery is specifically used to load JSON data by using HTTP GET request. JSON, an acronym for the JavaScript Object Notation, is a lightweight data-interchange format, used to store and exchange text information.

Syntax of getJSON in jQuery

Following is the syntax of getJSON jQuery method:
$.getJSON( url, [data], success_function( data, Status, xhr ))
Where:
URL is a required parameter where a string is given to specify a server where the request is sent.
data: Data to send to the server along with HTTP request.
success: If the request is successful the given function will be executed. This is an optional parameter that also contains the returned data from the server. There are other parameters in this callback function:
success_function(data, status, xhr)
Where parameters in success function are:
Data = returned data from the server.
Status = returns request status i.e. success, error, timeout, notmodified.
xhr= it contains XMLHttpRequest object. In case of Internet Explorer, it defaults to ActiveXObject otherwise XMLHttpRequest.
An example of getJSON()
The example below shows how to load text data from JSON file, namely getjson.json. For the example, we have placed this file at the same location where we are using the jQuery getJSON() method.The data loaded after clicking the button is shown in paragraphs. You can also see demo online by clicking the link below:
First getjson.json file:

{
  "SiteName": "w3asp",
  "Tutorial": "JQuery Article",
  "Lesson": "getJSON() Method"
}

HTML file code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
$("#btnjson").click(function(){
$.getJSON("getjson.json",function(ajaxresult){
$("#WebSiteName").append(ajaxresult.WebSiteName);
$("#Tutorial_Name").append(ajaxresult.Tutorial);
$("#Lesson").append(ajaxresult.Lesson);
});
});
});
</script>
</head>
<body> 
<button id="btnjson">Load JSON data from file!</button>
<p id="WebSiteName">WebSite Name: </p>
<p id="Tutorial_Name">Tutorial Name: </p>
<p id="Lesson">Lesson: </p>
</body>
</html>

Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*