http://www.formget.com/jquery-post-data/
jQuery Ajax Post Data Example
Fugo Of FormGet
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----*\n\nResponse : " + response+"\n\nStatus : " + 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
DOWNLOAD SCRIPT LIVE DEMO & GET WP THEME
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----*\n\nResponse : " + response+"\n\nStatus : " + 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.