AJAX的异步加载数据案例

最新推荐文章于 2022-06-19 06:00:00 发布

超级可爱的小甜甜

最新推荐文章于 2022-06-19 06:00:00 发布

阅读量213

点赞数 2

文章标签： ajax

本文链接：https://blog.csdn.net/qq_41256881/article/details/105478902

版权

案例

1.实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {

    private String name;
    private int age;
    private String sex;

}

2.Controller:获取一个集合对象，展示到前端页面

@RequestMapping("/a2")
public List<User> ajax2(){
    List<User> list = new ArrayList<User>();
    list.add(new User("甜甜1号",12,"女"));
    list.add(new User("甜甜2号",12,"女"));
    list.add(new User("甜甜3号",12,"女"));
    return list; //由于@RestController注解，将list转成json格式返回
}

3.index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>

    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/a2",function (data) {
                console.log(data)
                var html="";
                for (var i = 0; i <data.length ; i++) {
                    html+= "<tr>" +
                        "<td>" + data[i].name + "</td>" +
                        "<td>" + data[i].age + "</td>" +
                        "<td>" + data[i].sex + "</td>" +
                        "</tr>"
                }
                $("#content").html(html);
            });
        })
    })
</script>
</body>
</html>

超级可爱的小甜甜

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX的异步加载数据案例

案例1.实体类@Data@AllArgsConstructor@NoArgsConstructorpublic class User { private String name; private int age; private String sex;}2.Controller:获取一个集合对象，展示到前端页面@RequestMapping("/a2"...
复制链接

扫一扫