Quick Reach
The get method of jQuery
The jQuery Get method ($.get(URL)) loads data from the server by using the HTTP GET request.
As mentioned in the $.ajax chapter, this is a short form of jQuery ajax method. The URL part is where a page or file name e.g. text file may be specified.
See online example of get method
The URL may be a .php or .aspx or some other file that may communicate with a database to return database’s data. Once returned, you can use this data to display in different elements of HTML without reloading the web page.
The get method is generally used to return data (GET) from the server while the data returned may be the cached data. If the scenario is to ensure that data must not be from the cache, the jQuery post() method should be used.
Another example of get method
Syntax of jQuery get method
Following is the syntax of jQuery ajax get method:
$.get( url, [data], [callback function], [type] )
Where
- URL is a string specifying the server to which request is sent. This is the required parameter of get jQuery.
- data: Here, you will specify the data to send to the server along with HTTP request. This is an optional parameter.
- callback function: Optional parameter. If the request is successful, this function will execute. It also contains the returned data from the server. The other parameters in this jQuery get callback function are:
CallbackFunction(data, status, xhr)
Where
- 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.
- Type: It specifies the type of returned data from the server to the callback function. The returned data may be in these forms: text, HTML, script, XML, JSON, jsonp.
jQuery ajax get example
In the following example, the jQuery get method is used to fetch data from a text file. The data from text file will be shown in a div element of the example page.
Click on the button “Load data…” and it will be loaded into a div without refreshing the web page. See the example by clicking the link below:
Experience this example online
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#loaddata”).click(function(){
$.get(“ajaxexample.txt”,function(ajaxresult){
$(“#getrequest”).html(ajaxresult);
});
});
});
</script>
</head>
<body>
<div id=“getrequest”></div>
<button id=“loaddata”>Load data for getrequest Div</button>
</body>
</html>
|
A $.get example with a PHP file
Now, we will use a PHP file in the Get method of jQuery. First of all, two text boxes (name and location) are used to take values from the user. As you enter text and press the button, the $.get() method will call get_text.php file.
The .php will take the parameters and return the output string. All will be done without reloading the page by using the get method.
Note that, the get_test.php file is placed at same location where HTML source file, that uses $.get() method, is placed.
If AJAX call is successful the callback function will display returned data into “getrequest” Div. See demo online by clicking the link below:
Experience this example online
First get_test.php code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
$get_name=$_GET[“name”];
$get_location=$_GET[“location”];
if( $get_name )
{
echo “Name entered is: “. $get_name .“<br>”;
echo “Location:” .$get_location;
}
?>
|
HTML file using jQuery $.get() method
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#loaddata”).click(function(){
txtname=$(“#txtname”).val();
txtlocation=$(“#txtlocation”).val();
$.get(“get_test.php”,{ name:txtname, location: txtlocation },function(ajaxresult){
$(“#getrequest”).html(ajaxresult);
});
});
});
</script>
</head>
<body>
<div id=“getrequest”></div>
Enter Name: <input type=“text” id=“txtname”><br />
Enter Location: <input type=“text” id=“txtlocation”><br />
<button id=“loaddata”>Click to send request to get_test.php</button>
</body>
</html>
|
Also see: jQuery post() method
Leave A Comment?