Chargement d'un fragment Thymeleaf en Ajax

Même si le moteur de template Thymeleaf est exécuté du côté serveur, il est possible de charger un fragment à la suite d'un évènement.

Dans notre page, nous avons une section avec l'id main

<div id="main" class="container-fluid">

</div>

Le fragment sera inséré à cet endroit après un appel sur le serveur.

 var XHR = new XMLHttpRequest();
 XHR.open('get', '/ajaxfragment');
 XHR.send();

 XHR.addEventListener('readystatechange', function() {
     if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {
         document.getElementById("main").innerHTML = XHR.responseText;
     }
});

Le code du contrôleur qui nous retourne notre fragment Thymeleaf.

@GetMapping(value = {"/ajaxfragment"})
public String getAjaxFragment(Model model) {

    List<User> users = new ArrayList<>();

    users.add(new User("Yvan", "Dubois"));
    users.add(new User("Yvon", "Couler"));
    users.add(new User("Ytord", "Lamope"));

    model.addAttribute("users", users);

    return "fragments/ajax::Ajax";
}

Le fragment Thymeleaf

<div th:fragment="Ajax">

    <h3>Ajax fragment</h3>
    <table class="table">
        <tr th:each="user : ${users}">
            <td th:text="${user.firstname}" />
            <td th:text="${user.lastname}" />
        </tr>
    </table>
</div>

Cette stratégie peut être  utilisé afin de rendre plus dynamique certaine partie de votre applicaiton web.

Les sources du projets: https://github.com/marccollin/thymeleaf