带有模型和百里香叶的 Spring Boot Ajax 发布表单提交答案

【问题标题】：Spring Boot Ajax post form submit with model and thymeleaf带有模型和百里香叶的 Spring Boot Ajax 发布表单提交
【发布时间】：2019-03-30 04:17:21
【问题描述】：

我有一个 Spring Boot 控制器，它返回一个视图，我想通过使用 ajax 端点来更改它，但同时使用 modelAttribute 从表单中获取值，然后在页面上发送一个或多个列表并用百里香遍历这些列表。有可能吗？这是控制器：

@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 请求：

$(".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");
        }
    });

}

我不想从 ajax 成功部分操作页面，因为当模型发送到页面时，我已经在使用 thymeleaf 进行操作。

【问题讨论】：

标签： jquery ajax spring spring-boot thymeleaf

【解决方案1】：

所以你想要的是使用ajax 请求接收一个 Thymeleaf 片段。您可以通过更改以下代码并添加片段来实现此目的，您将在其中添加属性。我们将创建一个名为 list 的 html 文件，我们将在其中保存片段。

百里香片段

<!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>

控制器

@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";
}

然后在您的ajax 上，您只需要接收结果并将其附加到一个元素。

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

希望对你有帮助。

【讨论】：

感谢您的回答！不，我只想提交表单，然后将一些列表发送到页面，用百里香遍历这些列表，然后基本上从列表中返回带有这些值的页面......但我想异步进行，所以页面不会' t 刷新 :(
好的，现在我知道你想要什么了。我刚刚编辑了我的答案。现在您将返回一个带有所需列表的 Thymeleaf 片段。希望它现在有所帮助。另外，现在建议使用async:false 和ajax。
我不确定我现在做错了什么，因为当我提交表单时，它会从控制器返回字符串
你在那个字符串中收到了什么？您应该会收到一个带有我发送给您的代码的 html。
我收到字符串“layouts/list :: list”