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
Aucun commentaire:
Publier un commentaire