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

  1. Get the user data from textboxes using JavaScript.
  2. Deal with some jQuery ajax codes to send the user data to the server using post.
  3. The php file will check the user data.
  4. 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

<html>
<head>
<title>jQuery Ajax Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="ajax_test.js"></script>
</head>
<body>
<p>User Name</p><input type="text" id="userName" />
<p>Password</p><input type="password" id="password" />
<br />
<div id="loginButton"><pre>Sign In</pre></div>
<div id="check"></div>
</body>

</html>

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


$(function(){
$("#loginButton").button() ;
$("#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

Advertisements

8 responses »

  1. Medhat Dawoud says:

    nice article, but try to write the codes in the HTML mode inside

     

    to appear more clear 🙂

    go on

  2. biga says:

    زيز ارتيكل ايز فييييييييرى جود
    زانكس علاء

  3. shakle hst3’allek kteer :D…bas good job MSA (Y)

    • Alaa Attya Mohamed says:

      thnx 🙂 do you have any suggestions a bout advanced topics related with AJAX you are interested to read ?!

  4. I am sure this article has touched all the internet users, its really
    really pleasant piece of writing on building up new webpage.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s