欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JQuery ajax实现异步分页

程序员文章站 2022-07-12 19:15:31
...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<ul id="content">

</ul>
<p id="page">
</p>
<script>
    function page(page_now=1) {
        $.ajax({
            'type':'get',
            'url':'/heroinfo_page/'+page_now,
            'success':function (data){
                var heroinfo_list = data.heroinfo_list
                var lis = ''
                $.each(heroinfo_list,function (index,value) {
                    var id = value['id']
                    var hname = value['hname']
                    lis += '<li>' + hname +'</li>'

                })
                $('#content').html(lis)
                var page_list = data.page_list
                var as = ''
                $.each(page_list,function (index,value) {
                    var page_now = value
                    as += '<a href="' + page_now + '" title="' + page_now + '" onclick="return false">' + page_now + '</a>'
                })
                $('#page').html(as)
            },
            //在服务器响应之前处理一些函数
            'beforeSend':function(xhr){
                $('#content').html('<img src="/static/images/加载中.gif"/>')
            }
        })
    }

    $(function (){
        page()
        $('#page').delegate('a','click',function(){
            page(this.title)
        })
    })
</script>
</body>
</html>

上一篇： jQuery.Ajax回调函数success返回字符串中文乱码问题

下一篇： aliyun阿里云Maven仓库镜像地址

推荐阅读