码迷,mamicode.com
首页 > Web开发 > 详细

使用ajax异步加载数据

时间:2020-01-25 22:13:18      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:contex   name   click   script   OLE   var   val   control   let   

使用ajax异步加载数据

  1. controller为User赋值

    @RequestMapping("/a2")
    public List<User> a2() {
        List<User> userlist = new ArrayList<User>();
        userlist.add(new User("大头儿子", 6, "男"));
        userlist.add(new User("小头爸爸", 30, "男"));
        userlist.add(new User("老王", 45, "男"));
        return userlist;
    }
  2. button和table

    <input type="button" id="btn" value="加载数据">
    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        </thead>
        <tbody id="content">
        </tbody>
    </table>
  3. jQuery导入以及function

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        $(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>"
                    }
                    $("#content").html(html);
                })
            })
        })
    </script>
  4. 页面效果

    技术图片

使用ajax异步加载数据

标签:contex   name   click   script   OLE   var   val   control   let   

原文地址:https://www.cnblogs.com/pinked/p/12233403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!