时间戳

首页 > 解决方案 > Wordpress PHP 如何使用 AJAX/JQUERY 添加加载更多功能

php - Wordpress PHP 如何使用 AJAX/JQUERY 添加加载更多功能

问题描述

ajax我想通过使用and向我的 Wordpress 页面添加“加载更多”功能jquery。现在，我通过设置获得了五项数据，posts_per_page => 5但由于某种原因，当我单击加载更多按钮时，它总是加载相同的五项/帖子，所以有人可以告诉我我做错了什么吗？

这是我的 PHP 代码（functions.php）

$args = array(
  'post_type' => array('news'),
  'post_status' => array('publish'),
  'posts_per_page' => 5
);

$query = new WP_Query($args);

这是我的 JS 代码：

let news_offset = 5;
loadMore(news_offset);

$('.loadmore').on("click", e => {
  e.preventDefault();
  news_offset++;
  loadMore(news_offset);
});

function loadMore(news_offset) {
  $.ajax({
    url: "/wp-admin/admin-ajax.php",
    data: {
      action: "fetch_news",
      offset: news_offset
    },
    success: function(data) {
      // Append results to DOM
      $(".news").append(data);
    },
    error: function(errorThrown) {
      console.log(errorThrown);
    }
  });
 }

欢迎提出任何建议或意见:-)

标签： phpjqueryajaxwordpress

解决方案

请添加偏移量WP_query

$my_offset = $_POST['offset'];  //Fetch offset from the ajax request
$args = array(
  'post_type' => array('news'),
  'post_status' => array('publish'),
  'posts_per_page' => 5,
  'offset' => $my_offset
);
$query = new WP_Query($args);

在你的 JS 代码中：

let news_offset = 5;            //Start with 0 if you don't have posts on page
loadMore(news_offset);

$('.loadmore').on("click", e => {
  e.preventDefault();
  news_offset += 5;            //Increment by 5
  loadMore(news_offset);
});

function loadMore(news_offset) {
  $.ajax({
    url: "/wp-admin/admin-ajax.php",
    method: "POST",
    data: {
      action: "fetch_news",
      offset: news_offset
    },
    success: function(data) {
      // Append results to DOM
      $(".news").append(data);
    },
    error: function(errorThrown) {
      console.log(errorThrown);
    }
  });
 }

推荐阅读