Java 使用Thymeleaf在HTML上显示数据

我想显示我从搜索中获得的数据，根据我的喜好进行个性化。现在，它只是纯文本

例如，我正在搜索“泰坦尼克号”，我从IMDB获得了它的名字、一些链接和一些信息

我有以下代码：

search.html

和Main.java

我想操纵每个字段，以不同的方式显示它，例如一个包含更多行的表，等等。

---

任何链接或代码示例都会帮助我更好地理解Thymeleaf和Spring Boot。

我来回答我的问题。正如SnakeDoc所建议的那样，我使用Ajax获得了想要的结果。这是一条漫长的路，主要是因为即使我有一个工作代码，我也会花几个小时搜索ajax post请求中的禁止403错误

因此，对于js部分：

    function ajaxPost() {
        // Here we prepare data for the JSON
        var formData = {
            moviename: $("#moviename").val()
        }
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "MYURL",
            data: JSON.stringify(formData),
            dataType: 'json',
            success: function (result) {
                {
                    $.each(result,
                        function (i, title) {
                            // do whatever you want with what you got from the server
                        });
                    console.log("Success: ", result);
                }
                console.log(result);
            },
            error: function (e) {
                console.log("ERROR: ", e);
            }

        });
    }

如果这看起来令人困惑，我访问您可以在我的问题中看到的字段 title.name、title.link、title.titleProp.description等，在函数（i，title）的主体内。 对于HTML

        <label for="moviename" style="margin-right:5px">Title:</label>
        <input type="text" class="form-control" id="moviename" placeholder="Enter a title"/>

在受保护的void配置（HttpSecurity http）方法中

---

或者，将csrf添加到ajax请求中。有关此主题的更多信息已在thymeleaf中讨论过

，您可以用html显示列表，如下所示：

<tr th:each="student: ${students}">
    <td th:text="${student.id}" />
    <td th:text="${student.name}" />
</tr>

---

更多信息：

您需要在一个控制器中公开两个REST API端点，然后从前端用Javascript调用它们，以便对API进行Ajax调用。一旦有了响应数据对象，就可以使用更多的Javascript以您认为合适的任何方式将数据注入DOM。所有这些，调用、响应和内容注入都可以在不刷新页面的情况下完成。因此，您的意思是，在我搜索信息并填充“finalList”之后，我可以公开一些端点，例如“getName”、“getId”等。。（使用“GetMapping”），我可以通过使用Ajax调用访问这些。这里有一些很棒的教程：而且-它们都是SpringBoot教程，但是如果您只使用原始Spring和Thymeleaf，您可能可以稍微调整它们以满足您的需要。感谢您提供的链接，@SnakeDoc。在这段时间里，我通过尽可能多地学习JavaScript和ajax来解决这个问题。我发布了一个答案：）。但是当我从后端获取信息时，通过使用Thymeleaf，我不是只获取字符串，而不是对象吗？您可以使用@ModelAttribute将模型传递给模板渲染器。th：然后每个循环遍历传递给它的对象，并生成响应中发送的html。如果您使用异步请求执行此操作，您的评论是正确的，但是，由于thymeleaf在将响应发送回浏览器之前对表达式进行求值，因此它可以访问您传递给它的对象。哦，太好了。很高兴知道Thymeleaf可以做到这一点。谢谢你的回答和澄清！我最近为一个学校项目制作了一个spring/thymeleaf网站。我认为它可能对您有用（因此您可以复制粘贴一些代码，如果您愿意；）。非常感谢。对于后端部分，我没有任何问题，问题是我从未连接后端和前端，也没有JavaScript方面的知识。我不会复制粘贴，这是我努力学习的方式，我推荐给任何人！

    private String content;
private List<Result> finalList;
private List<Result> resultList;

public void setContent(String content) throws IOException {
 //code to compute finalList
}

public List<Result> getContent() {
    return this.finalList;
}

private List<String> link = new ArrayList<>();
private String name;
private TitleProp titleProp;

private String trailer;
private String rating;
private String description;
private String genre;

    function ajaxPost() {
        // Here we prepare data for the JSON
        var formData = {
            moviename: $("#moviename").val()
        }
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "MYURL",
            data: JSON.stringify(formData),
            dataType: 'json',
            success: function (result) {
                {
                    $.each(result,
                        function (i, title) {
                            // do whatever you want with what you got from the server
                        });
                    console.log("Success: ", result);
                }
                console.log(result);
            },
            error: function (e) {
                console.log("ERROR: ", e);
            }

        });
    }

        <label for="moviename" style="margin-right:5px">Title:</label>
        <input type="text" class="form-control" id="moviename" placeholder="Enter a title"/>

    @PostMapping("/MYURL")
public ResponseEntity<Object> addSearch(@RequestBody SearchCriteria searchCriteria)
        throws IOException {
     // do whatever you want to get a result. I used a custom class "SearchCriteria"
     // which has a getter and a setter for the field
     // **private String moviename;**
    return ResponseEntity.ok(THIS GETS SENT TO AJAX);
}

    http.csrf().disable();

<tr th:each="student: ${students}">
    <td th:text="${student.id}" />
    <td th:text="${student.name}" />
</tr>