JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JQuery getJSON Example

July 29, 2014 by Krishna Srinivasan Leave a Comment

JSON stands for JavaScript Object Notation which is lightweight data interchange format used to exchange text information. The jQuery getJSON() method access the data of JSON from the remote location by using GET HTTP request and also used to transfer and storing the data independently. It contains the URL to which request is sent to the server with request and callback function is executed if the request succeeds.

  • Introduction to JQuery
  • Finding Duplicate Input Elements Using jQuery

JQuery getJSON Syntax

[code lang=”xml”]
$.getJSON(url, [data], [callback])
[/code]

Following are parameters used by getJSON() method:

  • url: It is used to send request to the specific URL.
  • data: The requested data that has to be sent to the server.
  • callback: It is a optional callback function, executed when the data is loaded successfully.

JQuery getJSON Example

First create a JSON file, save it as result.json and add some contents which are to be load on the web page.

[code lang=”xml”]
{
"name": "RushaliB",
"seat" : "125634",
"perc": "69%"
}
[/code]

After creating a JSON file, write the coding part for the processing of the ajaxgetJSON() method and save it with .html extension. Following script defines html file.

[code lang=”xml”]
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<head>
<title>the title</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function(event){
$.getJSON("result.json", function(jd) {
$("div").html(‘<p> Name: ‘ + jd.name + ‘</p>’);
$("div").append(‘<p>Seat No : ‘ + jd.seat+ ‘</p>’);
$("div").append(‘<p>Percentage: ‘ + jd.perc+ ‘</p>’);
});
});
});
</script>
</head>
<body>
<div>
jQuery ajax getJSON method example
</div>
<button>CLICK</button>
</body>
</html>
[/code]

  • The above program highlights how to access the data of JSON file on the server by clicking the button on the server.
  • $(“button”).click(function(event){ }); line defines click event which occurs when button is clicked.
  • $.getJSON(“result.json”, function(jd) {}); line indicates getJSON() method to access data of JSON file. The contents of the “result.json” file will get display on the browser.
  • $(“div”).html(‘Name: ‘ + jd.name +); line indicates the html method.
  • $(“div”).append(‘Percentage: ‘ + jd.perc+); line adds the percentage value.

JQuery getJSON Demo

When you run the above example, you would get the following output :

JQuery ajaxgetJSON Example
JQuery ajaxgetJSON Example1

Filed Under: jQuery Tagged With: JQuery Basics

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved