jQuery $.post() method is used to request data from a webpage and to display the returned result (sent from requested page) on to that webpage from where the request has been sent without page refresh.
$.post() method sends request along with some data using an HTTP POST request.
Under this, a request is send to a webpage (here it is jquery_post.php) from another page (say jquery_send.php) using syntax :
Syntax:
$.post( URL, data, callback);
Parameters:
- URL
The URL parameter is defined for the URL of requested page which may communicate with database to return results.
$.post("jquery_post.php",data,callback);
- data
The data parameter is defined to send some data along with the request.
,{ // Data Sending With Request To Server
name:vname,
email:vemail
}
- callback
The callback parameter is defined for a function to be executed if the request gets succeeded. This contains two sub parameters , the first one holds the returned data from the requested page and second one holds the status of the request.
,function(response,status){ // Required Callback Function
//"response" receives - whatever written in echo of above PHP script.
alert("*----Received Data----*nnResponse : " + response+"nnStatus : " + status);
}
Note : Both ‘ data ‘ and ‘ callback ‘ parameters are optional parameters, whereas URL is mandatory for $.post() method.
Below is our complete code with download and live demo option
Example:
The following example uses the $.post() method to send some data along with the request.
This is jquery_send.php page that contains jQuery $.post() method which can be implemented as given below:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<!-- Include JS File Here -->
<link href="style.css" rel="stylesheet"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var vname = $("#name").val();
var vemail = $("#email").val();
if(vname=='' && vemail=='')
{
alert("Please fill out the form");
}
else if(vname=='' && vemail!==''){alert('Name field is required')}
else if(vemail=='' && vname!==''){alert('Email field is required')}
else{
$.post("jquery_post.php", //Required URL of the page on server
{ // Data Sending With Request To Server
name:vname,
email:vemail
},
function(response,status){ // Required Callback Function
alert("*----Received Data----*nnResponse : " + response+"nnStatus : " + status);//"response" receives - whatever written in echo of above PHP script.
$("#form")[0].reset();
});
}
});
});
</script>
</head>
<body>
<div id="main">
<h2>jQuery Ajax $.post() Method</h2>
<hr>
<form id="form" method="post">
<div id="namediv"><label>Name</label>
<input type="text" name="name" id="name" placeholder="Name"/><br></div>
<div id="emaildiv"><label>Email</label>
<input type="text" name="email" id="email" placeholder="Email"/></div>
</form>
<button id="btn">Send Data</button>
</div>
</body>
</html>
And here we have “jquery_post.php” file , which contains following PHP codes, that reads the request, processes it and return the result.
<?php
if($_POST["name"])
{
$name = $_POST["name"];
$email = $_POST["email"];
// Here, you can also perform some database query operations with above values.
echo "Welcome ". $name ."!"; // Success Message
}
?>
For more reference you can visit our below link:
Form Submit Without Page Refreshing-jQuery/PHP
Conclusion:
With above tutorial you became familiar with jQuery’s $.post() method. Hope you might have liked it, to learn more & to get more coding tricks keep reading our other blogs.
10 Replies to “jQuery Ajax Post Data Example”
hi
nice and useful tuturial but sumthing is wrong.
city:vemail
should be email:vemail because in php script you get email not city.
thanks again for yout attention to my comment.
Thanks for looking into it !
We have updated it.
Please send me the link for the complete script
Here you will find the solution :
https://www.formget.com/jquery-registration-form/
https://www.formget.com/jquery-contact-form/
submit data using ajax jquery was very good example i want to know how to receive data from php into a application..
I have been to probably 30 tutorials on this, and yours is by far the cleanest and most easy to understand. Thanks for posting this!
Hello.
It works like a charm. Very simple and clean.
Thanks for the share!
For readability, I’d consider using the isset command within PHP.
Also, regarding the handling of received data, I’d suggest having the PHP file return a true or false statement and have the php file do what you want it to do when the button is pressed. This way, you’re increasing functionality and using the data flow more wisely.
Is this possible in java version phones?
I want code for invoice form especially for parse data from JS to php mysql
thank for your effort