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.

You can also search for these topics, get and post method in html examples, http request get vs post send with jquery, working of jquery http request get vs post body, list out parameters in jquery http request get vs post.

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

Click the below button to get server date and time.


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.

You can also search for these topics, jquery get method ajax example, list out the parameters in jquery get method, how to get message error from jquery ajax get() method, checkbox and attribute, selected option, label text, get request parameter in jquery, html and input value, height and width of element, syntax for jQuery $.get() method.

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

N/A


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() + "</>");
You can also search for these topics, jquery post method with data, jquery post method not allowed, post method with headers or without header using jquery, how to handle error in jquery post method, uploading and downloading the file using jquery post method file, how to redirect page, syntax and example for jQuery $.post() method.