jquery-test

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(){
                // 使用Thymeleaf内联语法，设置请求路径
                var url = "[[@{/books}]]";
                // 调用GET方法获取数据
                $.get(url, function(datas, status){
                    for(var i = 0; i < datas.length; i++) {
                        var data = datas[i];
                        // 简单输出数据，可将数据写入到table等列表中
                        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(){
                // 模拟数据，实际开发中这些数据可能通过AJAX获取
                var datas = [{"id":"1", "name":"", "author":""}, 
                            {"id":"2", "name":"", "author":""}];
                // 删除模板中的数据
                $("#dataTable").empty();
                // 遍历JSON数组
                for(var i = 0; i < datas.length; i++) {
                    // 获取单个数据对象
                    var data = datas[i];
                    // 创建tr与td
                    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添加3个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: ""};
                /**
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: url,
                    data: JSON.stringify(data),
                    success: function(data) {
                        alert(data.name);
                    }
                });
                */
                $.post(url, JSON.stringify(data), function(data) {
                    alert(data.name);
                });
            }
        </script>
        <input type="button" value="Send Post" onClick="send()"/>