Hire PHP Developer - Hire Ajax Developer

jQuery is one of the most popular javascript frameworks out there and for good reason. It has a plethora of features that make it a pleasure to work with. One of these is Ajax. Ajax is a way of sending information to the browser and retrieving it without loading the page. So, we can use this when we submit a form, everything happens without the page refreshing. With normal javascript this is nothing short of a nightmare but with jQuery it’s much easier. For this lesson’s purpose I’ve created a simple form that asks the user for their name and password, and will then display it on screen. However, whatever you want to do with the data, the Ajax is exactly the same.

So here is my HTML form, nothing fancy at all:

You’ll notice a small amount of PHP in there which is used to display the user’s name and email. It is important to remember that before we add the jQuery we must make sure the form works without it. The empty div is for displaying the data using jQuery. I’ve also created run.php, which will display the user’s information:

You could have all of those in one echo statement, but for clarity I’ve split it over multiple lines. If you run it now, you will see when you add your data and click submit it takes you to a new page which shows what you entered. So our form works now, without any jQuery. Now we can look at making it work using Ajax. Hoorah!

The Ajax

So our first step is to include jQuery. I suggest you use Google’s CDN to do this like so:

Select the Button

Now we need to tell jQuery only to run when the DOM Is loaded, and then select our submit button (which, if you check the HTML, I gave an id of “submitbutton” so we could easily select it)

You might notice that I’m passing a variable ‘e’ in. e represents the event, which in this case will be a mouse click. So the variable ‘e’ contains loads of information about the mouse click and also a nifty function which we will use later.

Setting Up the Ajax

There you have all the code that makes up our Ajax request. First we use jQuery’s serialize() function. This gets the data from the form so we can then use it, and so we can use it later we save it to a variable called formData. Once this is done we create a new instance of jQuery’s ajax object and set up various parameters which I shall explain below:

Success!

Now we need to create a function to actually display the data. We name this success (it must always be called this) and all we do is select ourdiv, then empty it, before adding the word “hi”, followed by a variable “d”. If you look, you’ll notice I passed in a variable “d” into our success function. This variable stores whatever was returned from the call. So all we then have to do is echo it out.

One last Thing

Remember we passed the variable ‘e’ in at the very beginning? We did this because we need to actually disable the default action for the submit button. If we don’t do this then the submit button will just act like normal and refresh the page and do what it normally does. It’s really easy though, just one line:

And that’s it.

Done!

Here is the entire jQuery code:

Time to test it, load it up, fill it out, click submit and you should see it change without refreshing the page. Voila! We are finished.

Demo