Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery Get() Method

Get() method of jQuery ($.get(URL)) loads data from server using HTTP GET request.

The URL might be a php or aspx or other web file (for example) that may communicate with database to return database's data. Then this data can be displayed in document to specified HTML elements using jQuery.

The get() function is generally used to return data (GET) from the server. The Get method may return cached data. So if the scenario is to ensure not returning cached data, post() function should be used.

Syntax of jQuery get() method

$.get( url, [data], [callback function], [type] )

Where

URL:  It is a string specifying server to which the request is sent. This is a required parameter.

data: Data to send to the serve along with HTTP request. Example data to be used to query userid/password from database server. Script of which might be written in specified URL. This is an optional parameter.

callback function: Optional parameter. If the request is successful this function will execute if given. It also contains returned data from the server. Other parameters in this call function are:

Callbackfunction(data, status, xhr)

Where

Data = returned data from server

Status = This returns request status i.e. success, timeout, error, notmodified

xhr= it contains XMLHttpRequest object. In case of IE (Internet Explorer) it defaults to ActiveXObject. Otherwise it is XMLHttpRequest.

Type: Specifies the type of returned data from server to callback function. Returned data may be in these forms:  text, html, xml, script, json, jsonp.

$.get()

The simple example given below loads a text file by using $.get method placed in same directory as the source file that calls it. After loading it will display the fetched data from text file to getrequest Div.


<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>
$.get() with PHP file to make AJAX Request

In example given below, we will use text box entered data. Entered text in location and name boxes will be assigned to the variables in jQuery. After the button is clicked $.get()function will call URL= get_test.php file. This will receive the sent parameters, location and name and return the output string. All will be done without reloading/refreshing the page.

get_test.php file is placed at same location as HTML file where $.get() method is used.

If the AJAX call is successful the callback function will display returned data into "getrequest" Div.

First get_test.php code


<?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

<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>


Related Videos