JavaScript post Method

February 7, 2021 5:00 pm IST

❮ Prev Next ❯

You are Here:

JavaScript post Method

JavaScript 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 javascript POST method and receive a response.

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>JavaScript post Request</h1> <button onclick="myFunction()">Click Me</button> <script> function myFunction() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; xhttp.open("POST", "/greet.php", true); xhttp.send(); } </script> </body> </html>

Run

Syntax

open(method, url, async, user, pass);

Parameter Values

Value	Type	Explanation
method	Required	Specifies the request type. Possible values are: GET POST
url	Required	Specifies the url to which the request is sent.
async	Required	true (asynchronous) or false (synchronous). Default is true.
user	Optional	user name for authentication in server side.
pass	Optional	password for authentication in server side.

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 javascript POST method and receive a response.

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>JavaScript post Request</h1> <button onclick="myFunction()">Click Me</button> <script> function myFunction() { var data = JSON.stringify({ myname: "Alex" }); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; xhttp.open("POST", "/greet-specific.php", true); xhttp.setRequestHeader("Content-type", "application/json"); xhttp.send(data); } </script> </body> </html>

Run