WordPress的AJAX加載頁面內容

我試圖讓wordpress通過AJAX加載我的其他頁面，首先我想我不會追加其他頁面的HTML，但它好像頁面不知道如何找到頁面ID。WordPress的AJAX加載頁面內容

我的jQuery文件Ajax的pagination.js

(function($) { 
function find_page_number(element) { 
    element.find('span').remove(); 
    return parseInt(element.html()); 
} 
$(document).on('click', '.menu-item a', function(event) { 
    event.preventDefault(); 

    page = find_page_number($(this).clone()); 
    $.ajax({ 
     url: ajaxpagination.ajaxurl, 
     type: 'post', 
     data: { 
      // action: 'ajax_pagination', 
      action: 'my_ajax_pagination', 
      query_vars: ajaxpagination.query_vars, 
      page: page 
     }, 
    beforeSend: function() { 
     $('#main').find('article').remove(); 
    $('#nav-burgermenu-btn').removeClass('active'); 
    $('#nav').removeClass('active'); 
     $(document).scrollTop(); 
     $('#main').append('<div class="page-content" id="loader">Loading New Posts...</div>'); 
    }, 
    success: function(html) { 
     $('#main #loader').remove(); 
     $('#main').append(html); 
    } 
    }) 
}) 
})(jQuery);

我的WordPress的功能PHP文件

一切都被加載這樣的：

global $wp_query; 
wp_localize_script('ajax-pagination', 'ajaxpagination', array(
    'ajaxurl' => admin_url('admin-ajax.php'), 
    'query_vars' => json_encode($wp_query->query) 
));

，然後將此代碼如下：

add_action('wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination'); 
add_action('wp_ajax_ajax_pagination', 'my_ajax_pagination'); 

function my_ajax_pagination() { 
    $query_vars = json_decode(stripslashes($_POST['query_vars']), true); 

    $query_vars['paged'] = $_POST['page']; 


    $posts = new WP_Query($query_vars); 
    $GLOBALS['wp_query'] = $posts; 

    add_filter('editor_max_image_size', 'my_image_size_override'); 

    if(! $posts->have_posts()) { 
     get_template_part('content', 'none'); 
    } 
    else { 
     while ($posts->have_posts()) { 
      $posts->the_post(); 
      get_template_part('content', get_post_format()); 
     } 
    } 
    remove_filter('editor_max_image_size', 'my_image_size_override'); 

    the_posts_pagination(array(
     'prev_text'   => __('Previous page', 'twentyfifteen'), 
     'next_text'   => __('Next page', 'twentyfifteen'), 
     'before_page_number' => '<span class="meta-nav screen-reader-text">' . __('Page', 'twentyfifteen') . ' </span>', 
    )); 

    die(); 
} 

function my_image_size_override() { 
    return array(825, 510); 
}

現在，當點擊我的導航欄中的鏈接時，它會將0追加到HTML中。這就像是從$（'＃main'）。append（html）;因爲find_page_number函數出錯了。不會追加HTML ..但我不確定。

來源

2017-04-11 Jonas Lingren

我想'my_ajax_pagination'應該返回一些的DOM，我沒有看到任何代碼這樣做呢？ –

的問題是，在這一部分：

else { 
    while ($posts->have_posts()) { 
     $posts->the_post(); 
     get_template_part('content', get_post_format()); 
    }

我更換了get_post_format（）的 '頁面' 和它的工作。

else { 
    while ($posts->have_posts()) { 
     $posts->the_post(); 
     get_template_part('content', 'page'); 
    }

還要確保'content'實際上是'content'，而不是'template-parts/page/content'之類的東西。

（原代碼爲https://premium.wpmudev.org/blog/load-posts-ajax/）

來源

2017-06-01 16:13:22 hnikol

WordPress的AJAX加載頁面內容

回答

相關問題