使用ajax异步加载数据

Posted pinked

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ajax异步加载数据相关的知识,希望对你有一定的参考价值。

使用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异步加载数据的主要内容,如果未能解决你的问题,请参考以下文章

ajax同步异步问题

使用ajax异步加载数据

jquery的ajax同步和异步

ajax异步加载问题

异步任务片段背景数据

jquery的同步和异步