美文网首页
JQuery ajax实现异步分页

JQuery ajax实现异步分页

作者: bboyAyao | 来源:发表于2018-06-25 13:24 被阅读0次
    <!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实现异步分页

          本文链接:https://www.haomeiwen.com/subject/iuxyyftx.html