An Ajax Example in jQuery – Incorporate Ajax in your Web Design

If you are a little familiar with web development you must have heard the word Ajax. I know a lot of beginners that hear this word think that it is probably an advanced topic. Before jQuery, achieving a task with Ajax was somewhat tedious. But jQuery has made it pretty simple for us.

Now for the visitors that absolutely have no clue what I’m talking about, let me explain this a bit. If you surf the net you must have seen this common behavior on pages, when you click on some sort of a button, e.g a submit button when you submit a form. The whole page of the website refreshes to show you a message that your request has been sent. This is a common behavior that we had been used to for years. Now imagine, if the whole page did not refresh, you filled out the fields of a form, clicked submit and a message appeared within the page telling you that your request has been submitted. Don’t you think that’s sleeker, richer user experience? Ajax makes these sort of experiences possible.

Now back to the topic! How does jQuery makes ajax simple for us. I am going to post an example here which uses jQuery and Ajax. Below is the html markup for a very simple form.

<form id="login" method="get" action="gateway" >
  <div id="msg" style="display:none;">
    Your Message has been sent!
  </div>
  <p>
    <label for="Name">Name:</label><br/>
    <input type="text" id="Name" name="Name">
   </p>
   <p>
    <label for="login_pass">Comments: </label><br/>
    <textarea id="Comments" name="Comments" size="30">
    </textarea>
  </p>
  <p>
    <input type="submit" class="submit">
  </p>
</form>​

Below is the javascript code which uses $.ajax to send an ajax call to a jsp file. In your case this could be any other file that processes the form request. You can learn more about the jQuery Ajax function here http://api.jquery.com/jQuery.ajax/

​$('#login').submit(function(){
  data = $(this).serialize();
  $.ajax({
    type: "POST",
    url: "/posthere.jsp",
    data: data,
    dataType: 'json',
    success: function(data){
      $('#Msg').css('display','block');
    }
  })
  return false;
})​

If you need help with incorporating cool technologies like AJAX on your website FMR Web Design in Boca Raton can help you.

Leave a Reply

Your email address will not be published. Required fields are marked *