Today I want to demonstrate how to integrate AJAX into a Spring MVC application. I’m going to use JQuery on a client side for sending of requests and receiving of responses. This tutorial will be based on one of my previous tutorials about Spring MVC and REST services. In this article you will read how to make a web-application more interactive with the help of asynchronous requests.


I need to modify the SmartphoneController class by removing methods which are not required any more. This is a first step of AJAX integration.

//imports are omitted
public class SmartphoneController {
	private SmartphoneService smartphoneService;
	@RequestMapping(value="/create", method=RequestMethod.GET)
	public ModelAndView createSmartphonePage() {
		ModelAndView mav = new ModelAndView("phones/new-phone");
		mav.addObject("sPhone", new Smartphone());
		return mav;
	@RequestMapping(value="/create", method=RequestMethod.POST, 
			produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
	public Smartphone createSmartphone(@RequestBody Smartphone smartphone) {
		return smartphoneService.create(smartphone);
	@RequestMapping(value="/edit/{id}", method=RequestMethod.GET)
	public ModelAndView editSmartphonePage(@PathVariable int id) {
		ModelAndView mav = new ModelAndView("phones/edit-phone");
		Smartphone smartphone = smartphoneService.get(id);
		mav.addObject("sPhone", smartphone);
		return mav;
	@RequestMapping(value="/edit/{id}", method=RequestMethod.PUT, 
			produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
	public Smartphone editSmartphone(@PathVariable int id, 
			@RequestBody Smartphone smartphone) {
		return smartphoneService.update(smartphone);
	@RequestMapping(value="/delete/{id}", method=RequestMethod.DELETE, 
			produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
	public Smartphone deleteSmartphone(@PathVariable int id) {
		return smartphoneService.delete(id);
	@RequestMapping(value="", method=RequestMethod.GET,
			produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
	public List< Smartphone > allPhones() {
		return smartphoneService.getAll();
	@RequestMapping(value="", method=RequestMethod.GET)
	public ModelAndView allPhonesPage() {
		ModelAndView mav = new ModelAndView("phones/all-phones");
		List< Smartphone > smartphones = new ArrayList< Smartphone >();
		mav.addObject("smartphones", smartphones);
		return mav;

You can compare the new version of the SmartphoneController with the older one. Methods which process PUT, POST, DELETE requests and return ModelAndView objects were removed. The methods were deleted because AJAX calls can be addressed directly to REST methods. Now the controller contains just two types of methods:

  • The first type directs user to pages where CRUD operations can be performed.
  • The second type performs CRUD operations (REST methods)

Client side

An AJAX usage implies a lot of code on a client side of a web-application. In this section I will demonstrate a basics which will help you to understand what steps to do for implementation of AJAX calls.
Let’s examine case with creation of a new smartphone in the application.

First of all I need to add JQuery library to HTML page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

A main part of the HTML has one valuable update – extension of form action attribute was changed to .json

<div id="container">
<h1>Create new Smartphone</h1>
<p>Here you can create new Smartphone:</p>
<div id="sPhoneFromResponse"></div>
<form:form id="newSmartphoneForm" action="${pageContext.request.contextPath}/smartphones/create.json" commandName="sPhone">
<form:select path="producer">
	<form:option value="NOKIA">Nokia</form:option>
	<form:option selected="selected" value="IPHONE">iPhone</form:option>
	<form:option value="HTC">HTC</form:option>
	<form:option value="SAMSUNG">Samsung</form:option>
<td><form:input path="model" /></td>
<td><form:input path="price" /></td>
<td><input type="submit" value="Create" /></td>
<a href="${pageContext.request.contextPath}/index.html">Home page</a>

And now, ladies and gentlemen, I wish to introduce a snippet of JQuery code for the creation of new smartphone:

    $(document).ready(function() {
      $('#newSmartphoneForm').submit(function(event) {
    	  var producer = $('#producer').val();
    	  var model = $('#model').val();
    	  var price = $('#price').val();
    	  var json = { "producer" : producer, "model" : model, "price": price};
        	url: $("#newSmartphoneForm").attr( "action"),
        	data: JSON.stringify(json),
        	type: "POST",
        	beforeSend: function(xhr) {
        		xhr.setRequestHeader("Accept", "application/json");
        		xhr.setRequestHeader("Content-Type", "application/json");
        	success: function(smartphone) {
        		var respContent = "";
		  		respContent += "<span class='success'>Smartphone was created: [";
		  		respContent += smartphone.producer + " : ";
		  		respContent += smartphone.model + " : " ;
		  		respContent += smartphone.price + "]</span>";

I’m not going to stop on this code and explain it in detail because you can read about AJAX and JQuery on official site.

Brief explanation: when someone want to submit the form with specified ID, all form fields are assigned to appropriate variables. After that a new JSON document is generated based on the form field variables. Then AJAX call is performed. It directed to URL which is specified in the action attribute of form tag. The JSON is used as a data which need to be processed. Type of the request is POST (it can vary depending on operation, e.g. for update it will has PUT value). In the beforeSend function I explicitly specify required headers for JSON format. In the end I formulate a response and insert it in DOM.

Create new Smartphone

That’s it what related to creation of smartphone. The update of smartphone is the similar, just type of the request need to be changed.

Now let’s see how to work with DELETE type of requests. As previously I need to change extension of URLs to .json

<a href="${pageContext.request.contextPath}/smartphones/delete/${sPhone.id}.json">Delete</a>

A JQuery code for the DELETE operation will be a little bit distinct compared to POST and PUT.

$(document).ready(function() {
	var deleteLink = $("a:contains('Delete')");
	$(deleteLink).click(function(event) {
			url: $(event.target).attr("href"),
			type: "DELETE",
			  beforeSend: function(xhr) {
			  	xhr.setRequestHeader("Accept", "application/json");
			  	xhr.setRequestHeader("Content-Type", "application/json");
			  success: function(smartphone) {
			  	var respContent = "";
			  	var rowToDelete = $(event.target).closest("tr");
			  	respContent += "<span class='success'>Smartphone was deleted: [";
			  	respContent += smartphone.producer + " : ";
			  	respContent += smartphone.model + " : " ;
			  	respContent += smartphone.price + "]</span>";

The first distinction is the selector for the element. In case with DELETE I want to work with links but not with forms. The type of the AJAX call is changed to DELETE value. There is no any data which is send with the request. And in the end I delete the row with the smartphone which need to be deleted.

Delete smartphone


I hope this short overview of the AJAX will be useful for you. There are a lot of features which can be implemented with the help of AJAX in any web-application, so don’t ignore this convenient way for communication with a server. You can find this application on GitHub.

About The Author

Mathematician, programmer, wrestler, last action hero... Java / Scala architect, trainer, entrepreneur, author of this blog

  • marghi

    very nice, put it on github, thank you 😉

  • Majid Lotfi


    Thank you for this tutorial, I imported it in STS, when I tried to create a smartphone I got this exception :

    ov 08, 2013 10:14:09 PM org.hibernate.engine.jdbc.spi.SqlExceptionHelper logExceptions

    ERROR: Table ‘hibnatedb.smartphones’ doesn’t exist

    Nov 08, 2013 10:14:09 PM org.apache.catalina.core.StandardWrapperValve invoke

    SEVERE: Servlet.service() for servlet [dispatcher] in context with path [/MobileApp] threw exception [Request processing failed; nested exception is org.springframework.orm.jpa.JpaSystemException: org.hibernate.exception.SQLGrammarException: could not execute statement; nested exception is javax.persistence.PersistenceException: org.hibernate.exception.SQLGrammarException: could not execute statement] with root cause

    com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Table ‘hibnatedb.smartphones’ doesn’t exist

    Please your help is appreciated.

    • Vladislav Molchanov

      It means that you haven’t the table with name “hibnatedb.smartphones”. Make sure that you use MySql database (com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException) and you have created the table with name “hibnatedb.smartphones”.

      • Susi Loma

        Hi, i would prefer to create the database table from the application, of course only in development mode. But i have never seen the config within spring. So do someone know what i have to do, to get the database table created from the application. In another hibernate application i use this parameter to do it. “create”

  • Sedat

    Hi, success part of my ajax post change it to HTML post. If i remove success part, it comes as XHR. Do you have any idea what the reason could be?

  • TechMan

    I have been trying with similar code since last 3 hours and getting 400 error while trying to add a new phone. Actually I was trying to do this with Angular $http and then tried with JQuery but no luck.
    POST with ‘consumes’ and ‘produces’ together is just not working for me.
    Any thoughts why?

    • I have no idea.
      Before publish any tutorial I always check a code sample works fine

      • Naveen Kumar Mishra

        I am trying to propagate the value in input type whenever user is selecting one option from select box.

        I have a form containing one select option and 3 input type(text) field. What i am trying to do here whenever user select one option from select box depending upon that option value some data i want to fetch from database and propagate to the same page in input type and then after clicking on submit button i want to store the data in database.

        please help me on this

  • Kasi

    Nice Article.. Key things here is @ResponseBody ,@RequestBody.. and Correct version of spring. use 3 above. I used 4 and worked like a champ.. I spent lot of time on it and its hard to get the good article like this

  • Linh Lino

    Thank you for your helpful post!
    For anyone who has a problem with database (like me) , here is MySQL code to create database and create table
    #Create Database
    mysqladmin -u root -p create hibnatedb

    #Create Table
    CREATE TABLE smartphones(
    producer VARCHAR(100) NOT NULL,
    model VARCHAR(40) NOT NULL,
    price DOUBLE(16,4),
    PRIMARY KEY ( id )

    #To install mysql on linux
    apt-get install mysql-server mysql-client


  • shivaram

    I just checked Git Code. Looks like DispatcherServlet configuration is missing in XML file. The code is not running for me when executing http://localhost:8080/MobileApp/

  • Thanks bro, it is quite useful for me

  • Majid Lotfi

    Thanks, nice tutorial, but the Edit is not implemented.

  • Ravi Kumar

    i am try to do in similar fasion, but i want to use html instead of jsp , when spring controller send object to view part ?

  • Pingback: Post Jquery Error Handling()