Wordpress通过div中的ajax加载帖子详细信息和内容

时间:2016-02-29 09:50:36

标签: javascript php jquery ajax wordpress

我已将post-id信息存储在data-*属性中,我希望通过&.ajax()函数在div中显示此内容。 这是我正在研究的代码。

  1. 显示帖子

    的列表项
    <li class="homus-partners-section-single" data-post-id="<?php the_ID(); ?>">
        <?php the_post_thumbnail(); ?>
    </li>     
    
  2. 我要显示项目的div

    <div class="homus-partners-detalis">
        <div class="homus-partners-detalis-img">
            <?php the_post_thumbnail(); ?>
        </div>
        <div class="homus-partners-detalis-info">
            <h4>
                <?php the_title(); ?>
            </h4>
            <p>
                <?php the_content(); ?>
            </p>
        </div>
    </div> 
    
  3. ajax功能

    $(document).delegate('li.homus-partners-section-single', 'click', function(event) {
        event.preventDefault();
        var pb_post_id = $(this).data('post-id');
        var data = {
            'action': 'GetPost',
            postURL : pb_post_id,
        };
        $.post(ajaxURL, data, function(response) {
            $( '.homus-partners-detalis' ).html(response);
        });
    
    });
    
  4. php函数

    function GetPost(){
        $cat = $_POST['catURL'];
        get_template_part($cat);
        exit();
    }
    add_action('wp_ajax_nopriv_GetPost', 'GetPost');
    
  5. 编辑2

    现在我的代码看起来像这样,但我没有回答

    1. 可点击元素的标记

      <li class="homus-partners-section-single" data-post-slug="<?php echo $post->post_name;?>">
      <?php the_post_thumbnail(); ?>
      

    2. div我要显示项目

       <div class="homus-partners-detalis">
         <?php get_template_part('single_pb_post_details'); ?>
       </div>
      
    3. php我正在调用div

        <div class="homus-partners-detalis-img">
          <?php the_post_thumbnail(); ?>
       </div>
       <div class="homus-partners-detalis-info">
       <h4>
         <?php the_title(); ?>
       </h4>
       <p>
        <?php homus_excerpt('homus_pb_excerpt'); ?>
      </p>
      </div>
      
    4. ajax功能

       $(document).delegate('li.homus-partners-section-single', 'click', function(event) {
        event.preventDefault();
        var pb_post_slug = $(this).data('post-slug');
        var data  = {
        'action': 'GetPostDetails',
         postURL : "single_pb_post_details.php?slugid="+ pb_post_slug,
        };
       $.post(ajaxURL, data, function(response) {
          $( '.homus-partners-detalis' ).html(response);
          alert('Got this from the server: ' + response);
      
       });
      
      });
      
    5. php函数

      function GetPostDetails(){
         $details = $_POST['postURL'];
         get_template_part($details);
      exit();
      }
      add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');
      

1 个答案:

答案 0 :(得分:1)

由于get_template_part只接受没有扩展名的文件的名称,在我们已经达到此代码的评论中:

$(document).delegate('li.homus-partners-section-single', 'click', function(event) {
    event.preventDefault();
    var pb_post_slug = $(this).data('post-slug');
    var data  = {
        'action': 'GetPostDetails',
        postURL : "single_pb_post_details",
        post_id : pb_post_slug
    };
    $.post(ajaxURL, data, function(response) {
        $( '.homus-partners-detalis' ).html(response);
        alert('Got this from the server: ' + response);
    });
});

响应ajax请求的php代码:

function GetPostDetails(){
    get_template_part($_POST['postURL']);
    wp_die();
}
add_action('wp_ajax_GetPostDetails', 'GetPostDetails');
add_action('wp_ajax_nopriv_GetPostDetails', 'GetPostDetails');

在模板文件中,您可以使用以下内容检查post_id值:

$_POST['post_id'];