ajax json无刷新分页

随着互联网技术的不断发展，网页所承载的信息越来越多，而分页就成为了常见的网站功能。传统的分页方式需要重新加载页面，体验不够优秀。而随着ajax和json的出现，无刷新分页也变得可行。

//html页面部分代码
<div id="page"></div>
<script>
    function setPage(pageNum) {
        $.ajax({
            type: "GET",url: "/getPageData",data: {pageNum: pageNum},dataType: "json",success: function (data) {
                //更新页面数据
                //...
                //更新分页
                var pageHtml = "";
                if (data.lastPage > 1) {
                    //上一页
                    if (data.currentPage == 1) {
                        pageHtml += "<span>上一页</span> ";
                    } else {
                        pageHtml += "<a href=\"javascript:setPage(" + (data.currentPage - 1) + ")\">上一页</a> ";
                    }
                    //中间数字页码
                    for (var i = 1; i " + i + "</a> ";
                        }
                    }
                    //下一页
                    if (data.currentPage == data.lastPage) {
                        pageHtml += "<span>下一页</span> ";
                    } else {
                        pageHtml += "<a href=\"javascript:setPage(" + (data.currentPage + 1) + ")\">下一页</a> ";
                    }
                    $("#page").html(pageHtml);
                }
            }
        });
    }
    //初始页面加载
    setPage(1);
</script>

上述代码简单解释下来，就是在页面中添加一个id为page的元素来展示分页信息，然后通过ajax向服务器发送请求，获取到第pageNum页的数据，然后更新页面信息并更新分页栏。更新分页栏使用了一个循环，不同的页码使用不同的格式，其中当前页码使用了一个特殊的类名，可以通过样式表对其进行样式修饰。

ajax和json的出现，使得前端页面无刷新分页成为了可能。同时，ajax和json应用到别的方面也能有同样惊人的效果，需要我们在实际应用中多加尝试。