You might be wondering about using jquery ajax method. Here is a simple Jquery ajax post example that explains easy way to send data to server and fetch data from server asynchronously.
Jquery ajax tutorial for beginners
1. Include Jquery in your html header
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
2. Create a html form to submit sample data asynchronously
<form id ="myForm">
ENTER YOUR NAME <input id ="myInput" name="myInput"/>
<button type="submit" id="submit">SUBMIT</button>
</form>
3. Create jquery method $.ajax to submit data to server
In your javascript add function like this
$.ajax(); // primary method
It takes some arguments like
a) Jquery ajax action-type (type), eg: post, get etc..
b) file to call (url ),
c) data to send (data),
d) what to do upon success ajax call (success)
e) what to do upon server error (error)
So, adding up the arguments, it finally looks like this
$.ajax(
{
type: "post",
url : "/path/to/my.php",
data : $("#myForm").serialize();
success : function(data) {
// alert(data);
} ,
error : function(data) {
// alert('Report Server Error');
}
}
);
4. Call ajax on clicking the submit button
So, our jquery ajax method is ready to send data to server.
NOTE : $("#myForm").serialize() method will send all the form elements to server.
Create handler to submit button
$("#submit").click(function () {
// add ajax function here.
});
It should look like
$("#submit").click(function () {
$.ajax(
{
type: "post",
url : "/path/to/my.php",
data : $("#myForm").serialize();
success : function(data) {
// alert(data);
} ,
error : function(data) {
// alert('Report Server Error');
}
}
);
});
5. Handling form elements on the server side
On your server side PHP or servlet get the form elements
In our example we passed our server file as "/path/to/my.php". Jquery ajax will send form to that location.
if it is PHP, use
$_POST["myInput"];
if it is jsp/servlet use
request.getParameter("myInput");
do what ever you want on the server side and you can send signal saying either it is good or bad or you can throw any exception.
Throwing exception will be treated as error by $.ajax();
So, what I have done in my example php file is
echo $_POST["myInput"];
6. Once it is success (Jquery ajax success)
It is all happy on the server side, the $.ajax parameter success function is invoked.
There is another important thing is to block default form submission.
Because, html form is submitted to server when you click on submit button.
In order to avoid such form submissions, you can say
event.preventDefault(); Use this on button click
So, our final form submission using jquery will look like this.
$("#submit").click(function (e) {
e.preventDefault();
$.ajax(
{
type: "post",
url : "/path/to/my.php",
data : $("#myForm").serialize();
success : function(data){
// alert(data);
} ,
error : function(data) {
// alert('Report Server Error');
}
}
);
});
