Meaning of Jquery Ajax is to retrieve the data from server side to client side or to post data from client side to server side. Jquery Ajax call can be Get or Post method with any kind of server technology like php,asp,.net or any other server side programming technology.
To request a Jquery ajax call we need a set of key/value pairs that configure the Ajax request. Before the invention of the Jquery we were use the old method of the pre-request callback function XMLHTTPRequest object with old traditional HTTPRequest method. After the Jquery invention its very easy to call the ajax request call to any server side script.
I was written many article of the Jquery which can be helpful to you more understand about the Use Of The Jquery. Anyway now we come to the original point of the How Jquery ajax Work? To understand this check the basic syntax of the Jquery Ajax below:
$.ajax({
type: “POST”,
url: “getData.php”,
data: {“type”:”new”},
cache: false,
success: function(data)
{
return false ;
},
error:function(err)
{
// error handling
}
});
In above syntax, type is the method of the request like GET or POST will be used to send request to the server side. Url is the url of the page from which we will retrieve the data or post the data to server side like getData.php. If we need to pass any data then we can use the any variable like type with data new to post. After the successful request the data will be retrieve and we can get on success method.
If any error occurred in executing the request then error function will be called. The above is the general discussion of how the jquery ajax will be used.
To understand the clearly find the below example of How to call Jquery Ajax request to check the customer login.
Before we Learn more about this tutorial its required the knowledge of JQuery and we need to add this JQuery in your local folder or you can directly called from the live URL of JQuery site. See the following line of code and place this code before the
tag of your html web page.
// you must include this line and if you want to add the path from local then change path to local directory.
<script src=”http://code.jquery.com/jquery-1.10.2.min.js” type=”text/javascript”></script>
You have to required to make the Html Member Login Form which takes the input of the user email and the password and those will be passed into the Jquery Ajax request called. You can put that form with any CSS Design as you like. Here i am not providing the css but provide the basic form so you can understand it easily.
<div class=”form-div”>
<form accept-charset=”UTF-8″ class=”signup-form” data-action=”Signup” method=”post” onsubmit=”return validateLogin();”>
<div class=”title”>
MEMBER LOGIN</div>
<div class=”control-group”>
<label>Email:</label>*<br />
<input autocomplete=”off” id=”email” name=”email” type=”text” />
</div>
<div class=”control-group”>
<label>Password:</label>*<br />
<input autocomplete=”off” id=”password” name=”password” type=”password” />
</div>
<div style=”height: 10px; width: 100%;”>
</div>
<div id=”errorMsg” style=”color: #bc0000; font-size: 18px;”>
</div>
<div class=”submitbtn” style=”text-align: center; width: 100%;”>
<input class=”btn btnred_100″ type=”submit” value=”LOGIN” /></div>
</form></div>
After html form is created , we need to call the jquery ajax call by calling the function on login button click. The syntax of the validation login function is given below:
function validateLogin()
{
var email=$(“#email”).val();
var password=$(“#password”).val();
$.ajax({
type: “POST”,
url: “checklogin.php?id=”+ Math.random(),
data: {“type”:”customerlogin”,”email”:email,”password”:password},
cache: false,
success: function(data)
{
var obj = $.parseJSON(data);if(obj.status==’invalid login’)
{
$(‘#errorMsg’).html(‘please enter valid email and password.’);
}else if(obj.status==’not verified’)
{
$(‘#errorMsg’).html(‘account not verified.’);
}
else if (obj.status==’blocked’)
{
$(‘#errorMsg’).html(‘Your account status is blocked.’);
}
else if(obj.status==”false”)
{
alert(“please try again”);
}else
{
$(‘#errorMsg’).html(‘please enter valid email and password.’);}
return false ;
}
});
return false ;}
We have only created the client side code yet but it required the checkloing.php page which contain the code to get the data posted from the jquery ajax called and check the email and password in the php page with data retrieved from the mysql. if email and password match then return the appropriate message by echo method in the php.
You can check in above function i have placed all the state which can be happened when wrong email and password entered by the user or if entered the correct login information then customer has not verified the email yet or the customer account is blocked.
