Submitting the HTML Forms in AJAX way, using JQuery

Web 1 way of submitting Forms:

Most of the communications happens in a web applications, are happening through plain HTML forms. For example, in a blog, there will be a comment form with the fields such as comment, email id, etc. When the user fills in this form and hits the “Submit” button, a new request will be generated with the contents of this form and will be send to the server for further processing. And finally the server responds to the client (browser) with the results. All this time, between sending the request to the server and receiving a response, the user cannot do anything on the web application. The user has to wait until the server sends him back a response. This is how the form submission works in a traditional way or the web 1 way.

Web 2 way of submitting Forms:

With the invention of web 2.0 (or the invention of the way we develop web apps!), the communication between the server and the client (browser) has drastically changed. Using the XMLHttpRequest Object, one can asynchronously send and receive information to and from the server. The communication happens in the background while the user can still work on the web application. Google Search Suggestion would be a great example for this kind of communication. I’ve already written a post on how to implement this AJAX communication in Java web application, which you may like to read for further understanding.

It’s possible to implement this AJAX communication with plain JavaScript coding. But it will be good to use some JavaScript frameworks like JQuery to implement this AJAX communication. In this post, I will be explaining two of the JQuery’s AJAX function which I used in the Timelinr Application.

Using JQuery’s $.post() to make a AJAX call to Server:

$.post() is JQuery’s inbuilt function, used to loading page through POST request. The usage for this function is:

$.post("ProcessingServletName", { comment: "good", email: "dummy@nowhere.com" },
  function(data){
    alert("Returned data: " + data);
  });

By default, the $.post() function takes three parameters. First one is the Server resource name which will be processing your inputs. In our case, I’ve given the servlet name there. The second parameter is actually a list of input parameters that you want to send to the server. And finally the last parameter is a call back function, which will be invoked once the server returns the results. You can use the callback function to process the results returned by the server.

one difficulty is using this function is, the input parameters are need to be explicitly mentioned in the second parameter of the $.post() function. This will become really difficult, if you are having several input fields in a page or you are dynamically adding input fields to the page (for example, in Timelinr, i am dynamically adding the date range text fields). In such scenarios, we can use another AJAX function powered by a Jquery Form plugin.

Using JQuery Form Plugin to make a AJAX call to Server:

JQuery Form plugin allows us to easily make AJAX calls to the server. To use this plugin, you need to download it from here and then you need to add it to your web page. The syntax for using this plug-in is:

$('#formid').ajaxForm(function() {
   alert("Successfully submitted!");
});

The beauty of this plugin is, it automatically gathers all the input values from the form and it forms the AJAX call. Unlike the $.post() function where we need to explicitly mentions the input parameters, JQuery Form plugins enables us to easily make the AJAX call. In the case of Timelinr, I’ve used this Form plugin to submit the request for creating time lines. JQuery Form plugin automatically gathers the input values from all the dynamically added text fields and sends the AJAX call to the server.

There are other options also possible using JQuery Form plug-in. Check out this page for a detailed usage of JQuery Form Plug-in.

So, what’s your take on JQuery AJAX support. Have you used any of the above methods and what will be your feedback. I’ll be happy to hear from you.