hi guys ,here’s a new trick using jQuery ajax,
while working on a login system actually i was using jQuery in building some cool GUI components
so i faced a problem how will i send the user data to the server to check them ?!!
the only solution is to use ajax and the steps to do that
- Get the user data from textboxes using JavaScript.
- Deal with some jQuery ajax codes to send the user data to the server using post.
- The php file will check the user data.
- Receive the response from the php file using jQuery ajax.
So now let’s get some geeky behavior with some code snippets
first the html file that contains the form
[code]
User Name
Password
Sign In
[/code]
here a put an empty div with an id called check when the user data is true then i’ll user it to inform him,also when invalid data i’ll use it to tell the user
here’s the ajax_test.js
<br />
$(function(){<br />
$("#loginButton").button() ;<br />
$("#loginButton").click(function(){
var user = document.getElementById(“userName”).value;
var pass = document.getElementById(“password”).value;
$.post(“login.php”,{userName : user , password : pass } ,function(data) {//assign the php variables userName=user and password=pass
if(data==’yse’){
document.getElementById(“check”).innerHTML=”Login Successfully”;//if the serever respond with yes
}
if (data==’no’) {
document.getElementById(“check”).innerHTML=”Error in user Data”;//if the server respond with no
}
});
});
});
the most important method used here is $.post() it has three parameters
first the requested file on the server,then the passed parameters to the server (we use the : operator as an assignment operator),and last the code that handles the received data
in this tutorial the server is supposed to respond with either yes or no
and finally here’s the full source code
http://www.mediafire.com/?370f95ef27f1p3m