jQuery post() method

The post() method is one of the commonly used HTTP methods. It is used to load a page from the server using an HTTP POST request. This method never caches the data and is generally used to send the data with the request. We cannot bookmark the POST requests.

Syntax

Parameter Values

This method includes four parameter values in which one is mandatory, and others are optional. We must have to include the URL parameter to the post() method. The parameter values of the post() method are defined in the following table.

Parameter	Values
URL	It is the URL to which the request is sent. It is a mandatory parameter.
data	It is an optional parameter. It is data sent to the server along with the request.
function(data, status, xhr)	This is also an optional parameter. It is a callback function that executes on the successful server request. It also has three parameters: *data, status,* and *xhr* in which *data* contains the resulting data from the server, *status* represents the request status like "success", "error", etc., and the *xhr* contains the XMLHttpRequest object.
dataType	This is also an optional parameter that defines the type of data we are expecting from the server. The type can be "text", "json", "jsonp", "html", "script", and "XML".

Now, let's see a simple example of using the post() method.

Example

In this example, we are making a post request by using the post() method. We are using the two parameters that are URL and callback function of the post() method. Here, the Http Post request is used to load data from the server.

The URL parameter is set to the value test.html. The callback function has two parameters data and status in which the first parameter holds the data of the requested page, and the second parameter holds the request status.

In the output, we can see the data load from the server, and the status of the request is success.

test.html

<h1> Hello World </h1>
<h2> Welcome to the javaTpoint.com </h2>

Example2.html

<!DOCTYPE html>
<html>

<head>
<title> jQuery post() method </title>

<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head>

<body>
<h3> This is an example of using the post() method in jQuery </h3>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
<p id = "p1"> </p>
<p id = "p2"> </p>
<script>
$(document).ready(function() {
$("button").click(function() {
$.post("test.html", function(data,status) {
document.getElementById("p1").innerHTML = data;
document.getElementById("p2").innerHTML = "Status: " + status;
});
});
});
</script>
</body>

</html>

Test it Now

Output:

After the execution of the above code, the output will be -