jQuery post() Method

Last Updated:

jQuery post() Method

jQuery post() method loads data from the server using a HTTP POST request.

Requesting a URL

In the following example, we provide server-side coding for both PHP and Node.js, you can choose your favorite.

Example

The following is the server-side coding using PHP.

Greet.php
<?php echo "Hello User Welcome to ajax jquery"; ?>

The following is the server-side coding using Node.js.

Greet.js
var express = require("express"); var app = express(); app.post("/greet.js",function(req, res){ res.send("Hello User Welcome to ajax jquery"); }); app.listen(8000, function(){ console.log("port is listening to 8000"); });

In the following client-side coding, we are not sending any data. Instead, we request a URL using jQuery post() method and receive a response.

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery post() Method</h1> <p>Requesting url with no data using post() Method.</p> <button>Send Post Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/greet.php",function(data){ alert(data); }); }); }); </script> </body> </html>

Syntax

Syntax

$.post(url, data, success, dataType);

Parameter Values

ValueTypeExplanation
url Required Specifies the URL to which the 'POST' request to be sent.
data Optional Specifies data to send to the server along with the request. By default, no data is sent.
Note: data must be an object.
success Optional Specifies a function to collect the response from the server. By default the response is ignored
dataType Optional Specifies the type of data expected from the server. By default, jQuery will guess the dataType.
Possible values are
  • xml
  • json
  • script
  • text
  • html

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
post()YesYesYesYesYesYesYesYesYesYesYesYesYes

Requesting a URL with Data

In the following example, we provide server-side coding for both PHP and Node.js, you can choose your favorite.

Example

The following is the server-side coding using PHP.

greet-specific.php
<?php echo "Hello ".$_POST['myname']."! Welcome to ajax jquery"; ?>

The following is the server-side coding using Node.js.

greet-specific.js
var express = require("express"); var app = express(); app.post("/greet.js",function(req, res){ res.send("Hello "+req.body.myname+"! Welcome to ajax jquery"); }); app.listen(8000, function(){ console.log("port is listening to 8000"); });

In the following client-side coding, we are requesting a URL with data using jQuery post() method and receive a response.

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery post() Method</h1> <p>Sending data using post() Method</p> <button>Send Post Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/greet-specific.php",{ myname: "Alex" },function(data){ alert(data); }); }); }); </script> </body> </html>

Response with Specified DataType

In the following example, the response from the server is expected to be a text. But it is not necessary to mention it explicitly as by default jQuery will guess the dataType by itself.

Example

HTML Online Compiler
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery post() Method</h1> <p>Sending data using post() Method</p> <button>Send Post Request</button> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/greet-specific.php",{ myname: "Alex" },function(data){ alert(data); }, "text"); }); }); </script> </body> </html>

Share this Page

Meet the Author