Monday, February 24, 2014

Thymeleaf integration with Spring (Part 2)

1   Introduction

This is the second part of the Thymeleaf integration with Spring tutorial. You can read the first part here, where you will learn how to configure this project.

As explained at the beginning of the first part of this tutorial, the web application will send two types of requests:
  • Insert a new guest: Sends a synchronous request to the server for adding a new guest. This will demonstrate how Thymeleaf is integrated with Spring’s form backing beans.
  • List guests: Sends an AJAX request that will update a region (fragment) of the page in order to show the guest list returned from the server.

Let's see how we will accomplish this.

2   Handling forms

In this section we are going to see how a form is submitted with Thymeleaf. We will basically need three attributes:


The first two are defined in the form element:

The th:action attribute rewrites the action url, prefixing the application context to it.

The th:object attribute in the form element is the object selection. It can then be referenced within the form. What we do here is bind the form backing bean to the model attribute, which we defined in the controller before rendering the view:

As we see, th:object refers to the Guest form backing bean, while th:field will refer to its properties.  Take a look at the form body:

What th:field will do is assign the value of its input element to the backing bean property. So, when the user submits the form, all these th:field will set the form backing bean properties.

At the controller, we will receive the Guest instance:

Now the guest can be inserted into the database.

3   Sending AJAX requests

When trying to find a simple example of sending an AJAX request with Thymeleaf, I have found examples with Spring Webflow (render fragments). I also read others saying that you need Tiles in order to accomplish that.

I didn't want to use those frameworks so in this section I'm using jQuery to send an AJAX request to the server, wait for the response and partially update the view (fragment rendering).

The form

This form contains an input text with a search string (searchSurname) that will be sent to the server. There's also a region (resultsBlock div) which will be updated with the response received from the server.

When the user clicks the button, the retrieveGuests() function will be invoked.

The jQuery load function makes a request to the server at the specified url and places the returned HTML into the specified element (resultsBlock div).

If the user enters a search string, it will search for all guests with the specified surname. Otherwise, it will return the complete guest list. These two requests will reach the following controller request mappings:

Since Spring is integrated with Thymeleaf, it will now be able to return fragments of HTML. In the above example, the return string "results :: resultsList" is referring to a fragment named resultsList which is located in the results page. Let's take a look at this results page:

The fragment, which is a table with registered guests, will be inserted in the results block:

4   Conclusion

After integrating both frameworks, we learnt how forms are linked to the Spring MVC model. We also learnt how to send AJAX requests and partially update the view.

I'm publishing my new posts on Google plus and Twitter. Follow me if you want to be updated with new content.


  1. Nice post!!! thanks!!! Keep it up. Very useful, I use thymeleaf recently but I love it. I learn a lot with your post.

    1. I'm glad it's been useful to you, thanks for the feedback :)

  2. Many thanks for this post ! I wanted to perform AJAX without using webflow or tiles, and never found a correct sample... until now :)

    1. Yep, it was hard do find examples on the net. It's great you found the post useful!

  3. Xavier,

    I've downloaded the project and set it up using Eclipse running Tomcat 7. However, when I attempt to hit the application using http://localhost:8080/home I get a 404. It is complaining that it can't find the home.html.

    Any thoughts? Any secret sauce? :^)


    1. Hi Todd,

      You are missing both the context and the servlet path. The full URL should be:


    2. Thanks Xavier. Much appreciated.

  4. Xavier,

    In the home.html template you have the guestForm action set to:

    I can see the correlation between /guests/insert with the RequestMapping annotation on the insertGuest method of the HomeController, but I'm not understanding the need for the "/spring" portion of the path. It doesn't match anything in the HomeController, your java package structure or path to the HTML. Could you please clarify how the "/spring" is used?


    1. Hello,

      This is the servlet mapping. Since this application is integrated with Spring, its servlet will handle the request. You can take a look at web.xml and you will see that the Spring servlet's mapping is "/spring/*"

  5. Hi Xavier, thanks for the excellent post! By far the most informative when it comes to Spring / Thymeleaf integration I came across. If your project is open sourced, would you mind publishing the sample project in Github? It will be helpful to see the project in whole to understand components.

    1. Many thanks! The project is available at Github ( The link is included in the first part of this tutorial. Maybe I should link it to this second part too.

  6. Hi Xavier!
    I think it's not correct to present url in var url = '/th-spring-integration/spring/guests';
    Because it is context dependent. I guess more correct define it as
    var url = '@{/spring/guests}'; and add th:inline="javascript" to the "script" section.

    Regargds, Alexander

    1. Thanks for your contribution, Alexander :) I will change it as soon as I can

  7. Excellent post. I was searching for a nice way to reload page fragments using thymeleaf + spring and this explains things nicely

  8. Just made my morning, this was exactly what I required, thanks!

  9. Xavier, I took the liberty of updating the project for Spring Boot using JPA with Mysql

    I gave you the credits!

    Thank you

    You can see here:

  10. Thank you Thiago, appreciate the credits! :)

    It's awesome how simple configuration gets with Spring Boot!