using jQuery ajax with php

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


jQuery Ajax Test

User Name


Sign In


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
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