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;
	  request.open("GET", "ajax.php?name="+name+"&email="+email+"&mobile="+mobile, true);
	  request.send();	
  }
</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:" .$_GET['name']."<br />";
  echo "Email is:" .$_GET['email']."<br />";
  echo "Mobile is:" .$_GET['mobile']."<br />";
?>

Ajax Get Method Example

Below PHP Script for display the data retrieved through Ajax