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. En utilisant cette façon de procéder, on peut se rapproche de l'expérience utilisation d'une applicate dite SPA.

Chargement dynamique d'un fragment

L'application ressemble à ceci.

En cliquant sur Obtenir un fragment ajax, un appel sera fait sur le serveur et un fragment sera retourné.

Il faut avoir une section dans notre template pour insérer le fragment. 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 application web et éviter de recharger toute la page.

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