我没有任何链接或演示，因为我在本地工作
我有不同类别的新闻帖子。
我想将类别显示为按钮。
当您单击一个类别时，我想使用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);
}
如果您能帮助我们实现这一目标，我们将不胜感激。
最合适的回答,由SO网友:cybmeta 整理而成
错误说明了一切，您正在将请求发送到无效的主机。
更改此项：
var ajaxurl = \'http://my-site.co.uk <?php bloginfo("wpurl");?>/wp-admin/admin-ajax.php\';
收件人：
var ajaxurl = "<?php echo esc_js( admin_url( \'admin-ajax.php\' ) ) ?>";
Note: 根据您的代码和描述，我假设您是在PHP中生成jQuery代码，而不是在js文件中。
此外，在ajax响应发出后，您必须退出程序（这不是自动完成的，请求可能会永远打开，请参阅documentation):
echo $response;
// Terminate
exit;
我在您的代码中看到了更多错误：您告诉jQuery使用JSONP数据，但您的ajax响应是HTML字符串。应删除此行或将其更改为正确的数据类型：
dataType: \'jsonp\',
问题编辑完毕后，您引入了一个新问题。你是想假装
the_content() 价值
$response 但是
the_content() 打印帖子内容，不返回任何值。如果要获取帖子内容的值，应改用get\\u the\\u content（），并获得与相同的结果
the_content 你应该申请
the_content 过滤器。更改此项：
$response .= \'<p>\'. the_content().\'</p>\';
收件人：
// <p> are not need because the the_content filters include wpautop()
$response .= apply_filters( \'the_content\', get_the_content() );
