Spring Boot Ajax post form submit with model and thymeleaf

user_8747553 0
Viewed 12319

I have a spring boot controller which returns a view and i wanted to change it by consuming an ajax endpoint, but at the same time get the values from the form with a modelAttribute and then send a list or multiple lists on the page and iterate through those lists with thymeleaf.Is it possible? Here is the controller:

@RequestMapping(value="/search", method=RequestMethod.POST)
    @ResponseBody
    public String search(@ModelAttribute("specification") Specification specification, Model model) {

        List<SearchResultAutovit> list;

        list = scrapper.searchMethod(specification.getPrice,specification.getModel);

        if (list == null || list.isEmpty()) { 
            model.addAttribute("msg","Something"); 
        } else { 
            model.addAttribute("listaAutovit", list); 
        }
        return "?";
    }

Ajax request:

$(".btn.btn-danger").on('click', {function fire_ajax_submit() {
    var str = $(".form-inline.justify-content-center").serialize();

    $.ajax({
        type:"post",
        data:str,
        url:"/search",
        async: false,
        dataType: "json",
        success: function(){
           alert("success");
        }
    });

}

I don't want to manipulate the page from the ajax succes part because i'm already doing that with thymeleaf when the model is sent to the page.

thymeleaf spring-boot spring jquery ajax
1 Answers

So what you want is to receive a Thymeleaf fragment using an ajax request. You can achieve this changing your code for the following and adding a fragment where you will add your attributes. We will create an html file called list, where we will have the fragment.

Thymeleaf fragment

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<th:block th:fragment="list">
    <th:block th:if="${list != null}">
        <th:block th:each="iterator: ${list}">
            <!-- Do something -->
        </th:block>
    </th:block>
    <th:block th:if="${msg != null}">
        <p th:text=${msg}></p>
    </th:block>
</th:block>
</body>
</html>

Controller

@RequestMapping(value="/search")
public String search(@ModelAttribute("specification") Specification specification, Model model) {

    List<SearchResultAutovit> list;

    list = scrapper.searchMethod(specification.getPrice,specification.getModel);

    if (list == null || list.isEmpty()) { 
        model.addAttribute("msg", "Error!");
        model.addAttribute("list", list);
    } else { 
        model.addAttribute("list", list);
        model.addAttribute("msg", null);
    }
    return "layouts/list :: list";
}

Then on your ajax you just need to receive the result and append it to an element.

$.ajax({
    type:"post",
    data:str,
    url:"/search",
    dataType: "json",
    success: function(result){
       $(element).append(result);
    }
});

Hope it helps.

user_42590320
Related