WordPress AJAX不顯示內容

Question

我正在WordPress中建立一個站點，該站點將在開始時顯示兩行圖像，然后在單擊按鈕時動態顯示兩行圖像。

我有四個文件參與此過程：

• case-study-card.php ：其中包含每個卡的標記。
• home.php ：創建“加載更多”按鈕的位置。
• 負載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 )之后的一切success : function( data ) load-more.js success : function( data )無法正常工作，我不確定為什么嗎？ 我還收到一個admin-ajax.php 400（錯誤請求）錯誤，該文件在此項目中我沒有看到或處理過……

編輯：

資產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 ){任何東西success : function( data ){都無法正常工作，我不確定為什么。

Answer 1

還要放置您的本地化腳本，以便可以正確調試它。