Updated April 18, 2023
Introduction to jQuery get
In JQuery, get() is defined as one of the methods in jquery it is used for to send the http GET request to the servers with the help of asynchronous format not only for sending its also used for to retrieve the datas from the database servers whenever the user request is sent to the server the datas are in the query string formats the data is encrypted one and the method is called after the callback function if the user request is succeeded the get() method will pass the url, datas and callback type the XMLHttpRequest object is returned from the get() method.
Syntax
In javascript, the jquery library uses a different set of built-in methods for interacting with the users in the web application. The jquery get() method is interacting with the html elements for customized the web pages. It has its own syntax, and a set of parameters will be passed and return the request in the XMLHttpRequest format.
<html>
<head>
<script type="text/JavaScript" src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js>
</script>
<script type="text/javascript">
$(document).ready(function() {
$(“#variablename”).click(function(event)
{
$.get( "backend programfile with extension", some datas,[callback function],[type]);
--some jquery codes---
});
});
</script>
<body>
--some html UI based tag elemenst ---
</body>
</html>How get method works in jQuery?
The jquery is the javascript library; it can be used for interacting with the web pages more sophisticated. Using the jquery, it has the default methods, and the properties will be more needs for the web application requirements; based on that, the get() method is used for sending the datas using the asynchronous format to the server. With the help of default parameters like URL, data, and callback function types, it will be passing to the backend codes.
The XMLHttpRequest object is the return type of the get() method. The jquery’s have to default Ajax methods for sending the request and receiving the server responses like XMLHttpRequest object is returning the values. The XHR object of the jqueries or jqXHR is will be returned the some interfaces with the help of its properties, methods, and its behavior of the functions.
jQuery.get(url, [data], [callback], [type]) is the general syntax and parameters which will be used for sending the asynchronous datas to the server, whereas url is denoted by the any strings which containing the URL to which the particular request is sent to the servers, data is the additional and its the optional parameters which represent the key/value pairs that the result is responded by the servers.
The request data is any data types like integer, strings, etc., that will be unique identifiers if the method is used for the key/value data pairs. For the result, the XMLHttpRequest object is the return type of the get() method, then the “type” parameter mainly represented using the data types which are to be returned after the callback functions like user-defined functions, which has required in the events that have been called with the help of callback parameter in the get() method.
Examples of jQuery get
Following examples of jQuery get are mention below:
Example #1
Code:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#example").click(function(event){
$.get(
"index.php",
{ name: 'Sivaraman',
city: "Tiruppur",
mobile: "8220244056"
},
function(data) {
$('#demo').html(data);
}
);
});
$("#example1").click(function(event){
$.get(
"index1.php",
{ name: 'Sivaraman',
city: "Tiruppur",
mobile: "8220244056"
},
function(datas) {
$('#demo1').html(datas);
}
);
});
});
</script>
</head>
<body>
<p>Welcome To My Domain </p>
<span id = "demo" style = "background-color:red;">
Please Click the button for getting your saved datas
</span>
<span id = "demo1" style = "background-color:blue;">
Your retrieved datas
</span>
<div><input type = "button" id = "example"
value = "Welcome Users" /></div>
<div><input type = "button" id = "example1"
value = "Retrieve" /></div>
</body>
</html>
<?php
$_REQUEST["name"] ="Sivaraman";
$_REQUEST["city"] ="Tup";
$_REQUEST["mobile"] ="8220244056";
echo "Thank you for storing the details Please Click the Retrieve button for to checking your stored datas";
?>
<?php
switch ($_REQUEST) {
case 1:$_REQUEST["name"] ="Sivaraman";
echo "name";
break;
case 2:$_REQUEST["city"] ="TUP";
echo "city";
break;
case 3:$_REQUEST["mobile"] ="822027689";
echo "mobile";
break;
default:
echo "no";
}
?>Output:
Example #2
Code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("index1.php",
{ name: 'Sivaraman',
city: "Tiruppur",
mobile: "8220244056",
},
function(name, city, mobile){
alert("Sivaraman: " + name + "\n Tiriuppur: " + city + "\n 86536768:" + mobile);
});
});
});
</script>
</head>
<body>
<button>Please click the button for to getting the response from our servers</button>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome User To Retrieve the Current Date and Time</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$.get("index1.php", function(data){
$("#demo").html(data);
});
});
$("#frm").submit(function(event){
event.preventDefault();
$.get("index1.php", function(data){
$("#demo1").html(data);
});
});
});
</script>
</head>
<body>
<div id="demo">
<h2>Welcome To My Domain</h2>
</div>
<button type="button" id="btn1">Click the Button to get the today's date with time</button><br/><br/>
<form action="index.php" ide="frm">
<label>Name: <input type="text" name="name"></label><br/><br/>
<label>City: <input type="text" name="city"></label><br/><br/>
<label>Address: <input type="text" name="address"></label><br/><br/>
<label>Mobile: <input type="text" name="mobile"></label><br/><br/>
<label>State: <input type="text" name="state"></label><br/><br/>
<label>Country: <input type="text" name="country"></label><br/><br/>
<label>Pincode: <input type="text" name="pincode"></label><br/><br/>
<label>Email: <input type="text" name="email"></label><br/><br/>
<label>Comment: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="submit">
</form>
<div id="demo1"></div>
</body>
</html>
<?php
$name = htmlspecialchars($_GET["name"]);
$city = htmlspecialchars($_GET["city"]);
$mobile = htmlspecialchars($_GET["mobile"]);
$address = htmlspecialchars($_GET["address"]);
$state = htmlspecialchars($_GET["state"]);
$pincode = htmlspecialchars($_GET["pincode"]);
$country = htmlspecialchars($_GET["country"]);
$email = htmlspecialchars($_GET["email"]);
$comment = htmlspecialchars($_GET["comment"]);
echo "Hi, $name. Your comment has been successfully Submittted thank you for your registeration" . "";
echo "Please see your latest comments: $comment";
?>Output:
In the above examples, we used the get() method in different areas because it will fetch the UI datas with some technologies like AJAX. When we use ajax, it will retrieve the datas without page refresh or reloading the page. But here, we used without ajax; we simply store the UI datas and retrieve the datas using the get() method with formal parameters.
Conclusion
In jQuery, we have a lot of pre-defined methods with the properties. When we use the methods in the web-based applications, at the same time, the user browsers also to avoid the security restrictions like firewall or some other intranet site protections. Sometimes the jquery.get() will throw the errors like both compile-time and run-time errors; with the help of a web console, we will troubleshoot the errors.
Recommended Articles
This is a guide to jQuery get. Here we discuss How to get method works in jQuery and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
