Introduction

The jQuery.getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request.
The method returns XMLHttpRequest object.
Syntax
Here is the simple syntax to use this method:
$.getJSON( url, [data], [callback] )
Here is the description of all the parameters used by this method:
  • url: A string containing the URL to which the request is sent
  • data: This optional parameter represents key/value pairs that will be sent to the server.
  • callback: This optional parameter represents a function to be executed whenever the data is loaded successfully.
Example
Assuming we have following JSON content in names.txt file with json format content:
Following is a simple example of a simple showing the usage of this method.
And Save this text file as JSONExample.html.
Click on the button to load result.html file:
Names.txt file code
  1. {
  2. "employees":
  3. [
  4. {
  5. "firstName": "Gowtham ",
  6. "lastName": "Rajamanickam"
  7. },
  8. {
  9. "firstName": "Kiruthiga",
  10. "lastName": "Balasubramanian"
  11. },
  12. {
  13. "firstName": "Siva",
  14. "lastName": "Natesan"
  15. }
  16. ]
  17. }
JsonExample.html file code
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  4. <script type="text/javascript">
  6. $(function(){
  7. $.getJSON('names.txt',function(data){
  8. $.each(data.employees,function(i,emp){
  9. $('ul').append('
  10. <li>'+emp.firstName+' '+emp.lastName+'</li>');
  11. });
  12. }).error(function(){
  13. console.log('error');
  14. });
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <ul></ul>
  20. </body>
  21. </html>