Building on that example this guide shows how, using Spring and jQuery, you can Ajaxify your forms so that when submitted the user doesn’t have to be redirected to a new page
jQuery and required plugins
Create a new folder in the root of your project and call it ‘js’
Currently it is at version 1.3.2 so I have a file called jquery-1.3.2.min.js in my js folder
Next download a very useful plugin the jQuery Form Plugin. Also place the plugin in your js folder.
Linking your JS
Open the form.jsp file and add the following lines:
Convert the form to Ajax
This step involves using the jQuery form plugin to make your form submit via Ajax. After including the scripts add the following code:
This assumes you are quite comfortable with jQuery but just to explain, in the above code we are saying that when the document is read fetch the form with the id of nameForm and convert it to an ajaxForm (The ajaxForm function is built into the form plugin we download). We are also specifying some options for the ajaxForm method namely the target. A target is an jQuery selector that the Ajax Form plugin will automatically populate with the response from your submit
After your form go ahead and add in the div with the same id as the target, in the case above id=”nameFormResponse”.
The whole form.jsp should now look like so:
That should be it – so now if you visit http://localhost:8080/annotations/processName.page and submit the form you will see that the page doesn’t change and we render the response of the form submit into our nameFormResponse div element.
You can grab a copy of this project here