The $.get method of jQuery
The jQuery $.get method is used to load data from the server by HTTP GET request asynchronously. The $.get method is the shorthand of main AJAX method that makes it simple to make ajax calls.
The $.get method is the shorthand of main AJAX method that makes it simple to make ajax calls.
You should use $.get method for data that may be cached, Otherwise, use the $.post method.
Syntax of $.get method
This is how you may use the jQuery get method:
$.get( url, [data], [callback function], [type] );
You may use a URL to specify source or it can be a text file, a script file like PHP, .aspx etc.
In the following part, I will show you examples of using the $.get method to load data from a text file and using a PHP file that connects to a database server. The demo also includes displaying the returned data in div, HTML table etc. elements.
An example of get method to load data from a text file to HTML div
In this example, a text file is created and placed at the same location where I am using this demo source file. The text file contains dummy text.
After calling the $.get jQuery method, the returned data is displayed in an HTML div element. See the example by clicking the link or image below:
Online demo and code
At the click event of button, the $.get method is called where text file is called:
$(".btncls").click(function(){
$.get("gettst.txt",function(postresult){
$(".divget").append(postresult);
});
The callback function receives returned result if HTTP Get request is successful, and finally, the text file’s data is displayed in a div element by using $.append method.
An example of get with PHP and MySQL database
In this example of get method, a PHP file is called rather a text file. In the PHP file, a script is written to connect to a database and retrieve the table data. After that, an HTML table is created inside that PHP file that is returned as a request in $.get method.
Finally, that returned HTML table is displayed in the <div> selector of the document.
Instead of using a button to call the $.get, the method is executed as the demo page loads. The CSS classes for the table are created inside the source file that calls $.get method while these are referred inside the PHP file for demo purpose.
The following is the jQuery and markup:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$(document).ready(function(){
$.get("fetchdb.php",function(getresult){
$(".getdiv").append(getresult);
});
});
</script>
<style>
.demotbl {
border: 0px solid #69899F;
}
.demotbl th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border-bottom:3px solid #9ED929;
background-color:#49636D;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(73,99,109)),
color-stop(0.51, rgb(73,99,109)),
color-stop(0.87, rgb(73,99,109))
);
background: -moz-linear-gradient(
center bottom,
rgb(73,99,109) 3%,
rgb(73,99,109) 52%,
rgb(73,99,109) 88%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.demotbl td{
width:100px;
padding:10px;
text-align:center;
vertical-align: top;
background-color:#BDCDD2;
border: 1px solid #BED3AB;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#000;
text-shadow:1px 1px 1px #fff;
}
</style>
</head>
<body>
<h3>A jQuery get demo with MySQL DB and PHP</h3>
<div class="getdiv"><p>This is where HTML table is displayed</p></div>
</body>
</html>
PHP code:
< ?php
//Change DB parameters and DB name as per yours
$dbhostname = 'localhost';
$dbusername = 'user_name';
$dbpassword = 'password';
$conn = mysql_connect($dbhostname, $dbusername, $dbpassword);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
echo 'MySQL Connected successfully'."<BR>";
mysql_select_db("DBName") or die(mysql_error());
echo "Connected to Database"."<BR>";
$emp_salary = 7000;
$emp_id = 3;
$sql_statemanet = "select * from tbl_products";
$rec_select = mysql_query( $sql_statemanet);
if(! $rec_select )
{
die('Could not retrieve data: ' . mysql_error());
}
//Displaying fetched records to HTML table
echo "<table class='demotbl'>";
echo "<tr> <th>Product ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
// Using mysql_fetch_array() to get the next row until end of table rows
while($row = mysql_fetch_array( $rec_select )) {
// Print out the contents of each row into a table
echo "<tr><td>";
echo $row['Product_ID'];
echo "</td><td>";
echo $row['Product_Name'];
echo "</td><td>";
echo $row['Product_Quality'];
echo "</td><td>";
echo $row['Product_Quantity'];
echo "</td></tr>";
}
mysql_close($conn);
?>
A demo of sending data in get request
In above examples, I simply executed the get jQuery method without taking any parameter. You may also send data along with request while using the $.get method.
In this example, an HTML dropdown is given with product selection option. After selecting a product, as you click the button “Load Product data”, the $.get method is called.
Inside the get method, a PHP file is called where the selected product is also sent along with the request. In the PHP file, an SQL query is used after establishing the connection with the database to retrieve that products’ information from the MySQL table.
Finally, the information is displayed in an HTML table, just like the above example.
See online demo and code
This is how it is done:
First, the $.get method is executed at the click event of button:
<script>
$(document).ready(function(){
$("#getbtn").click(function(){
var prodname = $('#selproduct :selected').text();
$.get("getsingleprod.php", { ProductName: prodname },function(getresult){
$("#presentprod").html(getresult);
});
});
});
</script>
Inside the getsingleprod.php file, the $_GET array is used to receive the sent data:
$productname = $_GET['ProductName'];
After that, DB connection is established and an SQL query is written:
$sql_statemanet = "select * from tbl_products where Product_Name = '" .$productname ."'";
If product is found in the table, the markup to display that product is also written in PHP file:
echo "<table class='demotbl'>";
echo "<tr> <th>Product ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
// Using mysql_fetch_array() to get the next row until end of table rows
while($row = mysql_fetch_array( $rec_select )) {
// Print out the contents of each row into a table
echo "<tr><td>";
echo $row['Product_ID'];
echo "</td><td>";
echo $row['Product_Name'];
echo "</td><td>";
echo $row['Product_Quality'];
echo "</td><td>";
echo $row['Product_Quantity'];
echo "</td></tr>";
}
The CSS classes of the table are inside the source file that calls $.get method. Find the complete code of both files in the demo page.