利用AJAX实现WordPress中的文章列表及评论的分页功能-前端开发

本文旨在介绍如何利用 AJAX 技术实现 WordPress 网站中的文章列表及评论的分页功能。我们将会介绍如何使用 jQuery 和 WordPress 提供的 REST API 实现数据的异步加载，旨在提高网站的响应速度和用户体验。

本文旨在介绍如何利用 AJAX 技术实现 WordPress 网站中的文章列表及评论的分页功能。我们将会介绍如何使用 jQuery 和 WordPress 提供的 REST API 实现数据的异步加载，旨在提高网站的响应速度和用户体验。

1. 准备工作

在开始本文之前，我们需要确保以下内容已准备就绪：

一台运行最新版 WordPress 的服务器
一台拥有 root 权限的 Linux 服务器
一个具有良好响应体验的全新 WordPress 应用
一份最新版的 jQuery 库

2. 分页功能实现

在本教程中，我们将分页功能分为两部分：文章列表分页和评论列表分页，具体实现如下。

2.1 文章列表分页实现

为了实现文章列表的分页功能，我们需要先了解 WordPress 自带的 REST API。WordPress 为我们提供了一些 REST 接口，包括文章、分类、标签等等。我们需要使用这些接口来获取文章列表和文章页面数据。

首先，让我们来创建一个新的模板文件，我们命名为 custom_template.php。在模板文件中，我们添加一个空的 <ul> 元素来展示文章列表，以及下面 <div> 元素作为页码区域。

<!-- 文章列表容器 -->
<ul id="post-list"></ul>

<!-- 页码容器 -->
<div class="pagination"></div>

接下来，我们准备编写 JavaScript 代码。首先，我们绑定一个点击事件，这将会触发 AJAX 操作并发送请求到 REST API 上，接着更新文章列表和页码部分。

$(function(){
    var pageNum = 1;
    var postCount = 10;
    function showPosts(pageNum){
        $.ajax({
            url: '/wp-json/wp/v2/posts',
            type: 'GET',
            data: 'page='+pageNum+'&per_page='+postCount,
            beforeSend: function(){
                $('#post-list').html('<div class="loading"></div>');
            },
            success: function(data){
                $('#post-list').html("");
                var pageData = data;
                for(var i in pageData){
                    var html = '<li><a href="'+pageData[i].link+'">'+pageData[i].title.rendered+'</a></li>';
                    $('#post-list').append(html);
                }
                var pageDiv = '<a href="javascript:;" class="prev" id="prev" onclick="showPosts('+(pageNum-1)+')">上一页</a> <a href="javascript:;" class="next" id="prev" onclick="showPosts('+(pageNum+1)+')">下一页</a>'
                if(pageNum==1) $('.prev').hide();
                if(pageNum==2){$('#prev').hide();$('.prev').fadeIn(800);}
                if(pageData.length<postCount) $('.next').hide();
                if(pageData.length>=postCount && pageNum>=2) $('#prev').fadeIn(800);
                $('.pagination').html(pageDiv);
            },
            error: function(){
                $('#post-list').html('<div class="error">Error loading posts.</div>');
            }
        });
    }
    showPosts(pageNum);
});

在上面的代码中，我们使用 AJAX 发送了一个名为 /wp-json/wp/v2/posts 的 GET 请求，获取文章列表数据。我们给 URL 附加了两个数据：page 和 per_page，这两个数据会影响文章列表的呈现。page 代表文章列表的当前页数，而 per_page 代表每页展示的文章数。同时，我们使用了 .beforeSend 方法，在请求数据时自动把文章列表区域显示为加载中的状态，以便于给用户更好的体验。在请求到数据后，我们使用 for 循环遍历所有文章信息，并在页面上渲染。接下来，我们生成了页码容器，其包含了 上一页 和 下一页 按钮。如果当前页数是第一页，那么我们只显示下一页，如果当前页数是第二页，那么我们才会显示上一页。

2.2 评论列表分页实现

评论列表的分页与文章列表的分页业务类似，我们只需要使用 WordPress 自带的评论 API 来获取数据，然后使用 AJAX 请求数据进行渲染即可。

首先，我们可以跟第一步一样，在模板文件中添加一个空的 <ul> 元素作为评论列表容器，以及下面和文章分页相同的页码容器。

<!-- 评论列表容器 -->
<ul id="comment-list"></ul>

<!-- 页码容器 -->
<div class="pagination"></div>

接下来，我们就需要编写相应的 JS 代码来实现评论列表的分页显示。为了简单起见，我们也可以把接下来的 JS 代码放在 custom_template.php 文件中。

$(function(){
    var pageNum = 1;
    var commentCount = 20;
    var postID = 1;

    function showComments(pageNum){
        $.ajax({
            url: '/wp-json/wp/v2/comments/',
            type: 'GET',
            data: 'page='+pageNum+'&per_page='+commentCount+'&post='+postID,
            beforeSend: function(){
                $('#comment-list').html('<div class="loading"></div>');
            },
            success: function(data){
                $('#comment-list').html("");
                var pageData = data;
                for(var i in pageData){
                    var html = '<li><span class="name">'+pageData[i].author_name+'</span> ：<span class="content">'+pageData[i].content.rendered+'</span></li>';
                    $('#comment-list').append(html);
                }
                var pageDiv = '<a href="javascript:;" class="prev" onclick="showComments('+(pageNum-1)+')">上一页</a> <a href="javascript:;" class="next" onclick="showComments('+(pageNum+1)+')">下一页</a>'
                if(pageNum==1) $('.prev').hide();
                if(pageNum==2){$('#prev').hide();$('.prev').fadeIn(800);}
                if(pageData.length<commentCount) $('.next').hide();
                if(pageData.length>=commentCount && pageNum>=2) $('#prev').fadeIn(800);
                $('.pagination').html(pageDiv);
            },
            error: function(){
                $('#comment-list').html('<div class="error">Error loading comments.</div>');
            }
        });
    }

    showComments(pageNum);
});

在上面我们定义了一些与文章分页不同的一些新变量包括：pageNum 表示当前页数，commentCount 表示每页展示评论的数量，postID 表示需要获取评论的文章 id。接下来，我们异步请求评论列表数据，这里我们将参数 post 设置为了 postID，表示从评论中获取指定文章 id 的评论信息。编写与请求文章列表数据相似的 for 循环来渲染，同时将评论作者与评论内容分别展示。最后，我们同样通过页码将异步获取数据的评论信息展示出来。