Ajax异步加载数据

我们再创建一个pojo类：User

编写controller（编写一个集合，展示到前端页面）：

编写test2.jsp（前端页面）：

<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/5/22
  Time: 8:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <script>
        $(function () {
            $("#btn").click(function () {
                /*
                $.post(url,param[可以省略]，success)
                 */
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    let 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>"
                    }
                    $("#content").html(html);
                })
            })
        });
    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    <%--    数据，后台--%>
    </tbody>
</table>
</body>
</html>

测试：

posted on 2022-05-22 09:42 键盘敲烂的朱阅读(55) 评论(0) 编辑收藏举报