Home » JavaScript » jQuery » jQuery Get Example

About Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

jQuery Get Example

The aim of this example is to show you how to use the jQuery .get() method.

The jQuery .get() method is used to load data from the server using a HTTP GET request.

The signature of this method is like jQuery.get(url [,data][,success][,dataType ]) where only the url is mandatory.

Some methods as .done(), .fail(), and .always() can be chained to this method. These methods are executed during ajax execution.

Let’s look at some examples. To download the jQuery library, click here.
 

1. HTML

First of all you need to create a simple html document.

jQueryGetExample.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Get Example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>

</body>
</html>

2. jQuery Get examples

2.1 Loading data from server

Let’s add the following simple html code.

<div id="container" style="height:40px;width:150px;border:1px solid #eee"></div><br/>  
<a href="javascript:retrun 0;" onclick="showUserInfo()">Show User Info</a>

As you can notice in the following example, the jQuery .get() method is used to send a request to the server and pass the returned data to the success function (The second argument).

<script type="text/javascript">
	function showUserInfo(){
		$.get( "data.txt", function(data) {
			jQuery("#container").html(data);
		});
	}
</script>

data.txt

Data from server !

The result in the browser would be:

Loading data from server

Loading data from server

2.2 Loading json by jQuery get method

Let’s add the following simple html code.

<div id="container" style="height:100px;width:200px;border:1px solid #eee"></div><br/>  
<a href="javascript:retrun 0;" onclick="loadjson()">Show User Info</a> 

In this example, we need to get json formatted data for that we passed the datatype parameter as json.

<script type="text/javascript">
	function loadjson(){
		$.get("personaldata1.json", function( data ) {
		  $.each( data, function( key, val ) {
			$("<div>" + key + " = " + val + "</div>").appendTo( "#container" );
		  });
		},"json");
	}
</script>

personaldata1.json

{
	"firstname":"saeb",
	"lastname":"nar",
	"age":30
}

The result in the browser would be:

Loading json by jQuery get method

Loading json by jQuery get method

3.Conclusion

jQuery provides a good and simple method to send a HTTP Get request and call an anonymous method to handle the returned data. jQuery get() method takes four arguments, one of them,URL, is mandatory and the others are optional. The signature of this method is like jQuery.get(url [,data][,success][,dataType ]).

4.Download

Download: You can download the full source code of this example here: jquery get example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments