pom
<!-- Spring Boot版本 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.1.RELEASE</version>
</parent>
<!-- 为当前项目引入Starter模块 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
</dependencies>
yml
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
get and post
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script>
$(document).ready(function(){
var url = "[[@{/books}]]";
$.get(url, function(datas, status){
for(var i = 0; i < datas.length; i++) {
var data = datas[i];
alert(data.id + "-" + data.name + "-" + data.author);
}
});
});
function send() {
var url = "[[@{/save}]]";
var data = {id: "3", name: "", author: ""};
$.post(url, data, function(result){
alert(result);
}, "json");
}
</script>
<input type="button" value="Send Post" onClick="send()"/>
操作dom
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script>
$(document).ready(function(){
var datas = [{"id":"1", "name":"", "author":""},
{"id":"2", "name":"", "author":""}];
$("#dataTable").empty();
for(var i = 0; i < datas.length; i++) {
var data = datas[i];
var tr = $("<tr style='height: 40px;'></tr>");
var idTd = $("<td>" + data.id + "</td>");
var nameTd = $("<td>" + data.name + "</td>");
var authorTd = $("<td>" + data.author + "</td>");
tr.append(idTd).append(nameTd).append(authorTd);
$("#dataTable").append(tr);
}
});
</script>
<table style="width: 500px; text-align: center;" cellspacing="0" border="1">
<thead>
<tr>
<td width="10%">id</td>
<td width="60%">书名</td>
<td width="30%">作者</td>
</tr>
</thead>
<tbody id="dataTable">
<!-- 静态数据 -->
<tr style="height: 40px;">
<td>1</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
post
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script>
$.ajaxSetup({
contentType: "application/json; charset=utf-8"
});
function send() {
var url = "[[@{/save}]]";
var data = {id: "3", name: "", author: ""};
$.post(url, JSON.stringify(data), function(data) {
alert(data.name);
});
}
</script>
<input type="button" value="Send Post" onClick="send()"/>