Question

我正在尝试创建“加载更多”按钮，以在单击时加载更多自定义帖子类型，但是，我仍然收到400（错误请求）错误。这是我正在使用的代码。

// Header.php
<!doctype html>
<html <?php language_attributes(); class="no-js">
 <head>
    <!-- meta tags & links --->
    <script type="text/javascript">
      ajaxurl = <?php echo admin_url('admin-ajax.php'); ?>;

// HTML:

 <div class="project">
    <?php 
        $posts_array = array(
          'post_type' => 'project',
          'status' => 'publish',
          'order' => 'ASC',
          'posts_per_page' => -1,
          'paged' => $paged
        );
       $posts = get_posts($posts_array);
       $count = 0;
     ?>
       <?php foreach ($posts as $post) : $count++; ?>
         <div class="project">
            <php echo the_title(); ?>
         </div>
       <?php endforeach; wp_reset_query(); ?>
 </div>

 <button id="more_posts">Load More</button>

// JavaScript:

    $("#more_posts").on("click", function() {
      // When btn is pressed.
     $.ajax({
        url: ajaxurl,
        action: "more_post_ajax",
        offset: page * ppp + 1,
         ppp: ppp
      }).success(function(posts) {
        page++;
        $(".projects").append(posts);
      });
    });

// Functions.php

  function more_post_ajax(){
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];
    header("Content-Type: text/html");

     $args = array(
        'post_type' => 'project',
         'status' => 'publish',
         'posts_per_page' => $ppp,
         'order' => 'ASC',
         'offset' => $offset,
     );

    $loop = new WP_Query($args);
    while ($loop->have_posts()) { $loop->the_post(); 
       the_title();
    }

     exit; 
  }

add_action（'wp_ajax_nopriv_more_post_ajax'，'more_post_ajax'）; add_action（'wp_ajax_more_post_ajax'，'more_post_ajax'）;

Answer 1

这里有很多要修复的东西。

您的Ajax语法有点偏离。此外，您可以使用PHP指定每页的退货数量，因此无需发送，可以将page属性保留在前端。

$("#more_posts").on("click", function(e) {


     $.ajax({
        // use the ajax object url
        url: ajax_object.ajax_url,
        data: {
        action: "more_post_ajax", // add your action to the data object
        offset: page * 4 //  page # x your default posts per page
        },
        success: function(data) {
         // add the posts to the container and add to your page count
         page++;
         $('.projects').append(data);

        },
        error: function(data) {
         // test to see what you get back on error
         console.log(data);
        }
     });

});

对于您的初始PHP函数，您只应指定要首先显示的帖子数量。如果您使用-1，则只会在开始时显示所有帖子，而您不需要。您也不需要使用paged参数。您只需要偏移量。

<?php 
        $args = array(
          'post_type' => 'project',
          'status' => 'publish',
          'order' => 'ASC',
          'posts_per_page' => 4,
        );
       $posts = new WP_Query($args);
?>

<div class="projects">

   <?php
   while ($posts->have_posts()) {
       $posts->the_post(); ?>

   <div class="project">
    <?php the_title(); ?>
   </div>

   <?php
   wp_reset_postdata();
    }; ?>

</div>

对于您的更多帖子功能，您只需指定一个偏移量，就可以在该功能中添加其他帖子。

function more_post_ajax(){
    $offset = $_POST["offset"];


     $args = array(
        'post_type' => 'project',
         'status' => 'publish',
         'posts_per_page' => 4,
         'order' => 'ASC',
         'offset' => $offset,
     );

    $post = new WP_Query($args);
    while ($post->have_posts()) { $post->the_post(); 
       <div class="project">the_title();</div>
    }

   wp_reset_postdata();

     die(); // use die instead of exit 
  }

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax'); 
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

我尚未对此进行测试，但这将使您更接近工作环境。

在单击Ajax WordPress上加载更多自定义帖子

1 个答案: