Online Web Development Tutorials

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js?v=1"></script>
</head>
<body>
<script>
function load() 
  {
	var request;
	if (window.XMLHttpRequest) 
	  {
	     request= new XMLHttpRequest();// for Mozilla Firefox, Chrome etc 
	  }
	else if(window.ActiveXObject)
	  {
	    request = new ActiveXObject("Microsoft.XMLHTTP");// for IE
	  }
	  request.onreadystatechange = function() {
	    if (request.readyState == 4 && request.status == 200)
		  { 
		     document.getElementById("response").innerHTML = request.responseText;
		  }
	  }
	  var name = document.getElementById("name").value; 
	  var email = document.getElementById("email").value;
	  var mobile = document.getElementById("mobile").value;
	  var url = "ajax.php";
	  var params = "name="+name+"&email="+email+"&mobile="+mobile;
	  request.open("POST", url, true);
	  request.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	  request.setRequestHeader("content-length", params.length);
	  request.setRequestHeader("connection", "close");
	  request.send(params);	
  }
</script>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
  Enter your name: <input type="text" id="name" value="" />
  Enter your email:<input type="text" id="email" name="email" />
  Enter your mobile:<input type="text" id="mobile" name="mobile" />
  <input type="button" value="Submit" onClick="load()" />
  <div id="response"></div>
  </body>
</html>

Below PHP Script for display the data retrieved through Ajax

<?php 
  echo "Name is:" .$_POST['name']."<br />";
  echo "Email is:" .$_POST['email']."<br />";
  echo "Mobile is:" .$_POST['mobile']."<br />";
?>

Ajax Post Method Example

Below PHP Script for display the data retrieved through Ajax