gpt4 book ai didi

java - 使用 Thymeleaf 在 HTML 上显示数据

转载 作者:行者123 更新时间:2023-12-05 05:00:36 25 4
gpt4 key购买 nike

我想显示我从搜索中获得的数据,根据我的喜好进行个性化设置。此时,它只是纯文本。

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

我有以下代码:

search.html

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/search}" th:object="${search}" method="post">
<p>Message: <input type="text" th:field="*{content}" /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>
</body>
</html>

result.html

 <!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<p th:text="'content: ' + ${main.content}"></p>
<a href="/search">Submit another message</a>
</body>
</html>

SearchController.java

    @Controller
public class SearchController {
@GetMapping("/search")
public String greetingForm(Model model) {
model.addAttribute("search", new Main());
model.addAttribute("main", new Main().getContent());
return "search";
}

@PostMapping("/search")
public String greetingSubmit(@ModelAttribute Main main) {
return "result";
}
}

Main.java

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

主要问题是我不知道该去哪里。 finalList 是类型为“Result”的对象列表,其中包含如下字段

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

TitleProp

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

我想操纵每个字段以不同的方式显示它,例如包含更多行的表格等。任何链接或代码示例都会帮助我更多地了解 Thymeleaf 和 Spring Boot。

最佳答案

我是来回答我的问题的。正如 SnakeDoc 所建议的那样,我设法使用 Ajax 获得了我想要的结果。这是一条漫长的道路,主要是因为即使我有一个工作代码,我还是花了几个小时在 ajax post 请求上搜索 Forbidden 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 等,位于function (i, title) 的正文中。对于 HTML,

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

其中 moviename 是您从输入中获得的变量名称。

现在,在后端,我们必须配置我们的路径

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

主要问题是我有 web.security,而你有两个选择。第一个,你禁用 csrf。您必须将此行添加到您的安全配置中。

    http.csrf().disable();

protected void configure(HttpSecurity http) 方法中。

或者,您将 csrf 添加到 ajax 请求。讨论了有关此主题的更多信息 here

关于java - 使用 Thymeleaf 在 HTML 上显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63042770/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com