通过AJAX加载(WordPress)下一个帖子页面的特定部分

Load specific parts of (WordPress) next posts page via AJAX

本文关键字：定部 加载 AJAX WordPress 下一个 通过      更新时间：2023-09-26

我到底要做什么

我正在创建一个自定义的WordPress站点，它在页面博客(主)，类别和搜索结果中显示一个"加载更多帖子"按钮。当用户单击此按钮时，脚本将检索下一页中的文章并将其附加到容器中。下面是代码:

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // display or not the btn when page is loaded
        var morePosts = $("#dom-target").text();
        if (morePosts != "true") {
            $('.load-more').css('display','none');
        }

        // button functionality 
        var pageIndex = 1;
        var numOfPages = Number($('#numOfPages').text()); // parsed from php
        var nextLink = $('#nextLink').text(); // parsed from php
        $('.load-more').click(function(){
            if (pageIndex < numOfPages) {
                var nextPosts;
                $.get(nextLink+' .post-card', function(data){
                    // get articles in next page
                    nextPosts = data;
                    // append articles
                    $('#content').append(nextPosts);
                    // change value of index and redefine nextLink
                    pageIndex++;
                    nextLink = nextLink.replace(pageIndex+'/',pageIndex+1+'/');
                    // check if button display is still needed
                    if (pageIndex == numOfPages) {
                        $('.load-more').css('transition','all 0s');
                        $('.load-more').fadeOut();
                    }
                });
            }
        });
    });
</script>


问题:它加载了整个页面

我想知道$.get()是否与.load('main url .specific-class')等效，因为当我尝试应用类似的语法

时
$.get(nextLink+' .post-card')

控制台把我扔了

GET http://localhost/blog/page/2/%20.post-card 404 (Not Found)

或者如果有一种方法可以将数据(字符串)解析为HTML文档(因此我可以将jQuery应用于存储数据的变量并仅获得明信片而不是整个页面)。


提前感谢!:)

您必须自己解析响应，您可以简单地通过在

上包装$()并使用任何jQuery方法来完成。
$.get(nextLink, function(data){
     var nextPosts = $(data).find('.post-card');
      $('#content').append(nextPosts);
     //.......
});
相关文章：