Par*_*ari 1 javascript spring spring-mvc thymeleaf
如何在 Thymeleaf SpringMVC 中使用 AJAX 获取主页中的片段？
我有 Spring MVC 和 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>
以下是如何在服务器端呈现 HTML 并在 Ajax 调用中异步返回： 在 ajax 调用中，您可以获取返回的 HTML 并附加到占位符 div。
@GetMapping(value = "/theUrl")
public String aMethod() {
return "theFileName :: fragmentName "; //THIS
}
完整示例：
弹簧控制器：
@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 ";
}
}
resources/templates/frag/ajaxPart.html 中的片段：
<div th:fragment="time-info" class="tooltip">
<H2>Received from server:</H2>
<span th:text="${msg}"></span>
</div>
'/main' 映射的 HTML 页面 -mainPage.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>
| 归档时间： |
|
| 查看次数： |
6601 次 |
| 最近记录： |