Question

我正在WordPress中建立一个站点，该站点将在开始时显示两行图像，然后单击按钮时会动态显示另外两行图像。

此过程涉及四个文件：

case-study-card.php ：其中包含每个卡的标记。
home.php ：创建更多加载按钮的地方。
load-more.js
ajax-loaders.php

但是，我对我的AJAX崩溃的位置感到困惑吗？我觉得

/*************/
// load-more.js
/*************/

jQuery(function($){

    $('#loadmore').click(function(){

        var column_width = $(this).data('column-width');
        var max_num_pages = $(this).data('max-num-pages');
        var ignore = $(this).data('featured');
        var post_type = $(this).data('type');

        var button = $(this),
          data = {
            action:'loadmore',
            query: loadmore_params.posts,
            page : loadmore_params.current_page,
            security : loadmore_params.security
          };  

        $.ajax({
            url : loadmore_params.ajaxurl,
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); 
                 console.log ("before sending ajax"); // works
            },
            
            success : function( data ){
                if( data ) {
                    console.log("test")
                    button.text( 'Load More' ).prev().before(data); // insert new posts
                    loadmore_params.current_page++;

                    // where to insert new posts...
                    console.log("now inserting new posts");
                    $('.case-studies-container').find('.case-card').last().after( data );
                    console.log("found card");
                    // if it's the last page in the query, remove the button
                    if ( loadmore_params.current_page == max_num_pages )
                        button.remove(); 

                     console.log (data);

                } else {
                    // if no data, remove the button as well
                    button.remove(); 
                }
            },

            error : function(error){ 
                console.log(error);
            }
        });
    });
});

<!-- In case-study-card.php -->

<div class="case-card" >
  <div class="case-card__wrapper">
    <h4 class="case-card__title">
      Title
    </h4>
  </div>
</div>


<!-- in home.php
* After looping through and displaying the initial 5 cards, display the button at the bottom
-->

<?php 
  if ($the_query->found_posts > 5 ){
      echo "<div class='case-study__loadmore'><a id='loadmore'>Load more</a>";

  }
?>

<!-- ajax-loaders.php -->
<?php
function ajax_handler(){

  check_ajax_referer('load_more', 'security');
 
  //prepare arguments for query
  $args = json_decode( stripslashes( $_POST['query'] ), true );
  $args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
  $args['post_status'] = 'publish';
  $args['post__not_in'] = explode(',',$_POST['exclude']);
  $args['max_num_pages'] = $_POST['max_num_pages'];
  $cols = $_POST['columns'];
  $type = $_POST['post_type'];

  query_posts( $args );
  if( have_posts() ) :
    
    // run the loop
    while( have_posts() ): the_post(); 
    endwhile;
  endif;

  
  die;
}
add_action('wp_ajax_loadmore', 'ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'ajax_handler'); // wp_ajax_nopriv_{action}
 
?>

我相信success : function( data )中load-more.js之后的所有内容都无法正常运行，我不确定为什么吗？我还收到一个 admin-ajax.php 400（错误请求）错误，这是我在该项目中未曾见过或未处理过的文件...

编辑：

asset-loader.php

wp_localize_script( 'theme', 'loadmore_params', array(
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'posts' => json_encode( $wp_query->query_vars ), 
  'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  'max_page' => $wp_query->max_num_pages,
  'security' => wp_create_nonce("load_more")
) );


wp_localize_script( 'theme', 'repeater_loadmore_params', array(
  'ajaxurl' => admin_url( 'admin-ajax.php' ),
  'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
  'max_page' => $wp_query->max_num_pages,
  'security' => wp_create_nonce("repeater_field_nonce")
) );

编辑2：

我相信ajax处理程序url : loadmore_params.ajaxurl可以正常工作。

当我有url : loadmore_params.ajaxurl时，按钮文本将从“加载更多”更改为“正在加载”。
当我有url : ajaxurl时，按钮不会更改beforeSend。

这使我认为处理程序运行正常，但是success : function( data ){中的所有内容均无法正常运行，我不确定为什么。

Answer 1

还放置您的本地化脚本，以便可以对其进行正确调试。

WordPress AJAX不显示内容

1 个答案: