如何在Thymeleaf SpringMVC中使用AJAX在主页中获取片段？
我有SpringMVC和Thymeleaf模板引擎。我是Thymeleaf的初学者。
我想知道如何使用ajax来获取网站的一部分，如何对控制器进行简单的Ajax请求，并在结果中仅呈现模板（片段）的一部分。
我试图将片段job. html返回到home.html
我不想使用jquery我想使用普通的香草javascript。
我想我需要使用第一克隆所需的div第二清空主div第三将克隆附加到主div
这是我的控制器的样子
@GetMapping("/generalization")
public String selectSection(Model model) {
List<DateasDto> section = generalizationService.getSection();
model.addAttribute("section", section);
return "home";
}
@GetMapping("/organisations/{id}/general")
public String getGeneralSuccess(@PathVariable String id , Model model){
List<AssessmentDto> gen = generalizationService.getGeneral(id);
model.addAttribute("gen" , gen);
return "Job";
}
这是我的html home. html的样子
<body>
<script type="text/javascript" th:src="@{/js/working.js}"></script>
<form onsubmit="getGen(event)" >
<div class="form-group" >
<label for="SelectSection">Select Section</label>
<select class="form-control" id="SelectSection" onchange="sectionChangeSelected()">
<option value="">Select section</option>
<option th:each="section: ${section}"
th:text="${section.name}"
th:value="${section.id}"
></option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id = "table" ></div>
<div th:replace = "Job.html :: myTable " ></div>
</body>
这里js看起来像
const getGen= (event) => {
event.preventDefault()
console.log("get assessment called")
let id= document.getElementById("SelectSection").value;
console.log(id)
let url = `/org/subjects/${id}/assessments`
fetch(url)
.then(function() {
})
.catch(function() {
});
}
这是我的Job. html的样子
<body>
<div th:fragment = "myTable" >
<table>
<thead>
<tr>
<td >Name</td>
<td >Date</td>
</tr>
</thead>
<tbody>
<tr th:each="gen : ${gen}">
<td th:text="${gen.Name}"></td>
<td th:text="${gen.Date}"></td>
</tr>
</tbody>
</table>
</div>
</body>
以下是如何在服务器端呈现超文本标记语言并在Ajax调用中异步返回：在ajax调用中，您可以获取返回的超文本标记语言并附加到占位符div。
@GetMapping(value = "/theUrl")
public String aMethod() {
return "theFileName :: fragmentName "; //THIS
}
完整示例：
Spring控制器：
@Controller
class Ctrl {
@GetMapping("/main")
public String index() {
return "mainPage";
}
@GetMapping(value = "/getMoreMessage")
public String moreMessage(Model m) {
m.addAttribute("msg", "Server time is " + ZonedDateTime.now());
return "frag/ajaxPart :: time-info ";
}
}
资源/模板/frag/ajaxPart. html中的片段：
<div th:fragment="time-info" class="tooltip">
<H2>Received from server:</H2>
<span th:text="${msg}"></span>
</div>
/main映射的超文本标记语言页面-main Page. html
<!DOCTYPE HTML>
<html>
<body>
<script>
const getData = () => {
fetch('getMoreMessage').then(function (response) {
return response.text();
}).then(function (html) {
console.log(html)
document.getElementById("myPlaceHolder").innerHTML += html;
}).catch(function (err) {
console.warn('Something went wrong.', err);
});
}
</script>
<p><input type="button" onclick="getData( )" value="Get Data"/></p>
<div id="myPlaceHolder"></div>
</body>
</html>
