Home >>Ajax Tutorial >Ajax Post Method Example

Ajax Post Method Example using JavaScript

AJAX Post Method example

Registration Page

<DoctypeHtml>
<html>
	<head>
		<title>Registration form</title>
		<script src="java.js" rel="javascript"></script>
	</head>
	<body>
		<form>
			<table align="center">
				<tr>
					<th colspan="2">Registration form</th>
				</tr>
				<tr>
					<td colspan="2"><span id="msg"></span></td>
				</tr>
				<tr>
					<th>Name</th>
					<td><input type="text" id="n" placeholder="eg; John"></td>
				</tr>
				<tr>
					<th>Email</th>
					<td><input type="email" id="e" placeholder="eg:john@example.com"></td>
				</tr>
				<tr>
					<th>Mobile</th>
					<td><input type="number" id="m"placeholder="+91-1234567890"></td>
				</tr>
				<tr>
					<th>Address</th>
					<td><textarea id="ad" placeholder="eg:b/12 abc new delhi-110023"></textarea></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" onClick="savedata()">  
					<input type="reset"></td>
				</tr>
			</table>
		</form>
	</body>
</html>

JavaScript Function(Send Request to Server and get Response)

// creating method for passing data via using post method
function savedata()
{
			
if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("msg").innerHTML=xmlhttp.responseText;
		alert(xmlhttp.responseText);
		}
	}
		
	var n=document.getElementById("n").value;
	var e=document.getElementById("e").value;
	var p=document.getElementById("m").value;
	var ad=document.getElementById("ad").value;

	//alert(e);
	var url="insert.php";
	var par="name="+n+"&email="+e+"&mobile="+p+"&add="+ad;
	//var t=typeof(parameter);
	//alert(par);
	
	xmlhttp.open("POST",url,true);
	
	xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
	xmlhttp.setRequestHeader("content-length",par.length);
	xmlhttp.setRequestHeader("connection","close");

	xmlhttp.send(par);

}

PHP Page for Receiving Data From AJax(JavaScript Page)

<?php
//create your database and table then connect 
$con=mysqli_connect("localhost","root","","ajaxpost");

$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$mob=$_REQUEST['mobile'];
$add=$_REQUEST['add'];

if(mysqli_query($con,"insert into registration values('','$name','$email','$mob','$add')"))
echo "Data Saved";

?>

« Previous Next »

Ajax Tutorial Ajax Send Request Server AJAX Server Response Ajax Post Method Example Ajax Registration Form Display Data Using Ajax Display Country State City Ajax Registration Form with PHP, MySQL and jQuery

No Sidebar ads