jQuery - AJAX get() and post() Methods
With an HTTP GET or POST request, the jQuery get() and post() functions are used to get data from the server.
HTTP Request: GET vs. POST
There are two typically utilised request-response techniques, GET and POST, between a client and a server.
- GET - Data from a specific resource is requested.
- POST - Sends data to a specified resource for processing.
GET is mostly used to obtain (retrieve) information from a server. Note: It's possible that the GET method will return data that has already been cached.
You may also use POST to receive some server data. The POST method NEVER however stores data and is commonly used to transmit data together with the application.
jQuery $.get() Method
The $.get() function is used to request the server's data in the background using an HTTP GET application.
Note:- You can request anything from server side like a text file, a webpage, database table information, and so on.
Syntax:-
$.get(URL,callback); The URL to be requested is specified by the required URL parameter.
If the request succeeds, the optional callback parameter specifies the name of a function that will be run.
Example :- Requesting server date and time
Here is the content of our example ASP.net file ("ajax-get.aspx") looks as follows :
Response.Write("The server date and time is :- <b>" + DateTime.Now + "</b>"); In this example, the function $.get() is used to get date and time from a server:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$.get("jquery-resources/ajax-get.aspx", function (data, status) {
$("#div1").html(data);
});
});
});
</script>
</head>
<body>
<div id="div1">Click the below button to get server date and time.</div><br />
<button id="b1">Get Server Date-Time</button>
</body>
</html> Output :-
The URL we want to retrieve ("ajax-get.asp") is the first parameter of $.get().
A callback function is the second argument.
The result or content of the page requested is stored in the data parameter,
while the status of the request is stored in the status parameter.
Related Links
jQuery $.post() Method
An HTTP POST request is used by the $.post() function to request data from the server.
Syntax :-
$.post(URL,data,callback); The URL to be requested is specified by the required URL parameter.
The optional data parameter defines additional information to transmit or send with the request.
Example :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b3").click(function () {
$.post("jquery-resources/ajax-post.aspx",
{
name: "abcd",
city: "paris"
},
function (data, status) {
$("#div3").html(data);
});
});
});
</script>
</head>
<body>
<div id="div3">N/A</div><br />
<button id="b3">Get Server Response</button>
</body>
</html> Output :-
The URL we want to access ("ajax-post.aspx") is the first argument to $.post().
Then we provide some information to transmit with the request (name and city).
The "demo-post.aspx" ASP.net script reads the arguments, processes and results.
Tip : How to appear like the ASP.net file ("ajax-post.aspx") is:
string name="", city="";
name = Request.Form["name"];
city = Request.Form["city"];
Response.Write("Hello <b>" + name.ToUpper() + "</b><br /><br />");
Response.Write("Are you from <u>" + city.ToUpper() + "</>");
Related Links