<!DOCTYPE html>
<html>
<body>
<h1 style="color: green">Welcome to GFG</h1>
<input type="text" id="name"
placeholder="Your name" />
<input type="email" id="email"
placeholder="Email" />
<button onclick="sendJSONdata()">Send</button>
<p id="result" style="color: blue"></p>
<script>
function sendJSONdata() {
var name =
document.getElementById("name").value;
var email =
document.getElementById("email").value;
var result =
document.getElementById("result");
// Creating a XHR object
var xhr = new XMLHttpRequest();
// open a connection
xhr.open("POST", "/userdata");
// Set the request header
xhr.setRequestHeader(
"Content-Type", "application/json"
);
// Converting JSON data to string
var data = JSON.stringify(
{ name: name, email: email }
);
xhr.send(data);
// Create a state change callback
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 &&
xhr.status === 200) {
// Print received data from server
result.innerHTML = this.responseText;
}
};
}
</script>
</body>
</html>