使用AJAX显示类别名称中的帖子内容

时间:2015-06-06 作者:user668499

我想将类别显示为按钮。

当我单击按钮时,我想显示该类别中的帖子列表

帖子有标题、缩略图、内容(文本)

在帖子列表中,我想显示标题、图片、内容,可能还有日期。

我想使用ajax显示文章,而不需要重新加载页面。

我想我大部分都在那里,但我无法显示帖子中的所有内容。

显示类别:

    <ul>
          <?php

            $cat_args = array(
              \'orderby\'     => \'name\',
              \'order\'       => \'ASC\',
              \'hide_empty\'  => 1
            );


            $cats = get_categories($cat_args);

            foreach($cats as $cat){
              echo \'<li><a href="#" data-slug="\' . $cat->term_id . \'" class="js-category-button">\' . $cat->name . \'</a></li>\';
            }
          ?>
    </ul>
jQuery位于单独的文件中。

    $atj(\'.js-category-button\').on(\'click\', function(e){
      e.preventDefault();
      var catID = $atj(this).data(\'slug\');
      var ajaxurl = \'http://my-site.co.uk/wp-admin/admin-ajax.php\';
        $atj.ajax({
            type: \'POST\',
            url: ajaxurl,
            crossDomain : true,
            dataType: \'html\',
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                $atj(".the-news").append(response);
                return false;
            }
        });
    })
php脚本位于函数中。php

    add_action( \'wp_ajax_nopriv_load-filter\', \'prefix_load_cat_posts\' );
    add_action( \'wp_ajax_load-filter\', \'prefix_load_cat_posts\' );

    function prefix_load_cat_posts () {

      global $post;

      $cat_id = $_POST[ \'cat\' ];

      $args = array (
        \'cat\' => $cat_id,
        \'posts_per_page\' => 3,
        \'order\' => \'ASC\'
      );


      $cat_query = new WP_Query($args);

      if($cat_query->have_posts()) :
        while($cat_query->have_posts()) :
          $cat_query->the_post();


        $response = \'<div class="the-post">\';
        $response .= \'<h1 class="the-title">\';
        $response .= \'<a href="#">\'. get_the_title() .\'</a>\';
        $response .= \'</h1>\';
        $response .= apply_filters( \'the_content\', get_the_content() );
        $response .= \'</div>\';


        echo $response;

        endwhile; 

        endif; 

        wp_reset_postdata(); 

        die(1); 
    }    
代码保持原样,类别显示为按钮。如果我单击它们,它会显示文章标题,但不会显示内容

如何显示帖子内容、帖子缩略图和日期。

1 个回复
SO网友:Nirav Patel
    add_action( \'wp_ajax_nopriv_load-filter\', \'prefix_load_cat_posts\' );
    add_action( \'wp_ajax_load-filter\', \'prefix_load_cat_posts\' );

        function prefix_load_cat_posts () {

          global $post;

          $cat_id = $_POST[ \'cat\' ];

          $args = array (
            \'cat\' => $cat_id,
            \'posts_per_page\' => 3,
            \'order\' => \'ASC\'
          );


          $cat_query = new WP_Query($args);

          if($cat_query->have_posts()) :
            while($cat_query->have_posts()) :
              $cat_query->the_post();


            $response = \'<div class="the-post">\';
            $response .= \'<h1 class="the-title">\';
            $response .= \'<a href="#">\'. get_the_title() .\'</a>\';
            $response .= \'</h1>\';
            $response .= apply_filters( \'the_content\', get_the_content() );
             $response .= \'<a href="#">\'. the_post_thumbnail() .\'</a>\';
            $response .= \'</div>\';


            echo $response;

            endwhile; 

            endif; 

            wp_reset_postdata(); 

            die(1); 
        }



<script>
jQuery(document).ready(function () {
 jQuery(\'.js-category-button\').on(\'click\', function(e){
  e.preventDefault();
  var catID = jQuery(this).data(\'slug\');
  var ajaxurl = \'http://localhost/wordpress/wp-admin/admin-ajax.php\';
    jQuery.ajax({
        type: \'POST\',
        url: ajaxurl,
        crossDomain : true,
        dataType: \'html\',
        data: {"action": "load-filter", cat: catID },
        beforeSend: function () {
            jQuery(".the-news").html(\'<p></p>\')
        },
        success: function(response) {
            jQuery(".the-news").append(response);
            return false;
        }
    });
})

}); 
</script>



<ul>
      <?php

        $cat_args = array(
          \'orderby\'     => \'name\',
          \'order\'       => \'ASC\',
          \'hide_empty\'  => 1
        );


        $cats = get_categories($cat_args);

        foreach($cats as $cat){
          echo \'<li><a href="#" data-slug="\' . $cat->term_id . \'" class="js-category-button">\' . $cat->name . \'</a></li>\';
        }

      ?>
      <div class="the-news">

    </div>
</ul>     
结束

相关推荐

使用AJAX返回搜索表单结果

我试图从搜索表单中获取用户输入,根据用户输入构建查询,然后使用AJAX返回相关帖子。现在,表单构建select 正确下拉列表。表单内容在提交时消失,加载动画出现,然后显示结果。我遇到的问题是返回的实际结果-无论我做什么(即使是简单的echo: \'Success\'; 不起作用),我得到0 作为我的回报。表单代码:<form class=\"form-horizontal\" id=\"product_search_form\" name=\"product_search_form\" method