Ajax异步加载数据

童、一

于 2021-03-30 00:57:10 发布

阅读量189

点赞数

分类专栏： # SpringMVC 文章标签： ajax java springmvc

本文链接：https://blog.csdn.net/weixin_44432831/article/details/115315446

版权

SpringMVC 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用Ajax进行异步数据加载。通过创建一个User类，定义AjaxController来返回User对象列表，然后在前端JSP页面中利用jQuery的$.post方法，当点击按钮时，动态加载并显示从服务器获取的用户数据到表格中。

摘要由CSDN通过智能技术生成

学习目标：

Ajax的使用

学习内容：

Ajax的使用

学习时间：

学习产出：

接上篇

4、使用ajax异步加载数据

(1)、pojo:User

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

(2)、controller:AjaxController

@RestController
public class AjaxController {
    @RequestMapping("/a2")
    public List<User> Ajax2(){
        List<User> list = new ArrayList<User>();
        list.add(new User("张三",18,"男"));
        list.add(new User("李四",28,"女"));
        list.add(new User("王五",20,"男"));
        //由于使用了RestController注解，会将list转化为json字符串返回
        return list;
    }
}

(3)前端:test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script>
        /*
            点击button按钮后执行function函数，function函数中会请求a2页面，同时执行参数为data的function函数，
            在这个function函数中将后台传过来的数据通过html整合输出
         */
        $(function () {
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/a2", function (data) {
                    //console.log(data);
                    var html = "";
                    for (let i = 0; i < data.length; i++) {
                        html += "<tr>" +
                            "<td>" + data[i].name + "</td>"+
                            "<td>" + data[i].age + "</td>"+
                            "<td>" + data[i].sex + "</td>"+
                        "</tr>"
                    }
                    /*通过id选择器选择content，传入html内容*/
                    $("#content").html(html);
                });
            })
        })
    </script>
</head>
<body>
<input type="button" id="btn" value="加载数据">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>
</body>
</html>