我没有任何链接或演示,因为我在本地工作
我有不同类别的新闻帖子。
我想将类别显示为按钮。
当您单击一个类别时,我想使用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>\';
}
//echo \'<pre>\'; print_r($cats); echo \'</pre>\';
?>
</ul>
jQuery $(\'.js-category-button\').on(\'click\', function(e){
e.preventDefault();
var catID = $atj(this).data(\'slug\');
var ajaxurl = \'http://my-site.co.uk <?php bloginfo("wpurl");?>/wp-admin/admin-ajax.php\';
$atj.ajax({
type: \'POST\',
url: ajaxurl,
dataType: \'jsonp\',
crossDomain : true,
data: {"action": "load-filter", cat: catID },
success: function(response) {
$atj(".the-news").html(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 () {
$cat_id = $_POST[ \'cat\' ];
$args = array (
\'cat\' => $cat_id,
\'posts_per_page\' => 3,
\'order\' => \'DESC\'
);
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata( $post ); ?>
<div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
<h1 class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div id="post-content">
<?php the_excerpt(); ?>
</div>
</div>
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
}
当我单击类别时,控制台会显示502代理错误(找不到主机)有人能看到我做错了什么,或者如何解决这个问题吗。
更新
我的代码现在部分正常工作,但仍有问题我的js当前位于单独的js文件中
我能让它工作的唯一方法是使用ajaxurl的网站url
$atj(\'.js-category-button\').on(\'click\', function(e){
e.preventDefault();
var catID = $atj(this).data(\'slug\');
var ajaxurl = \'http://mysite.co.uk/wp-admin/admin-ajax.php\';
$atj.ajax({
type: \'POST\',
url: ajaxurl,
crossDomain : true,
//dataType: \'jsonp\',
//contentType: "text/html",
dataType: \'html\',
data: {"action": "load-filter", cat: catID },
success: function(response) {
$atj(".the-news").append(response);
return false;
}
});
})
我的php脚本在函数中。php我认为函数中应该只有一个标记。所以我不想在函数中突破php来创建html标记。这就是为什么我试图将其全部添加到$response变量中,然后得到响应。
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="#">\'. the_title() .\'</a>\';
$response .= \'</h1>\';
$response .= \'<p>\'. the_content().\'</p>\';
$response .= \'</div>\';
echo $response;
endwhile;
endif;
wp_reset_postdata();
die(1);
}
这类作品。我得到了带有帖子标题的html输出,但它在html之外,我无法输出内容。 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="#">\'. the_title() .\'</a>\';
$response .= \'</h1>\';
$response .= \'<p>\'. the_content().\'</p>\';
$response .= \'</div>\';
echo $response;
endwhile;
endif;
wp_reset_postdata();
die(1);
}
如果您能帮助我们实现这一目标,我们将不胜感激。