在这里使用AJAX并尝试基于用户交互显示帖子。现在,我有它的工作,用户作出类别下拉选择和职位加载相应。我想做的是更进一步,在另一个下拉列表中填充基于所选父类别的子类别。查看网站here.
jQuery
$(\'#ajaxFilter select\').on(\'change\', function(event) {
if(event.preventDefault) { event.preventDefault(); }
$this = $(this);
$value = this.value;
$page = $this.data(\'page\');
$term = $this.data(\'term\');
$qty = $this.closest(\'#ajaxFilter\').data(\'paged\')
$params = {
//Bind parameters
\'value\': $value,
\'page\' : $page,
\'term\' : $term,
\'qty\' : $qty,
};
//Run the query with those parameters
get_posts($params);
});
function get_posts($params) {
$content = $(\'#ajaxPosts\');
$.ajax({
url: psc.ajax_url,
data: {
action: \'filter_posts\',
nonce: psc.nonce,
params: $params
},
type: \'post\',
dataType: \'json\',
success: function(data, textStatus, XMLHttpRequest) {
if (data.status === 200) {
$content.html(data.content);
}
else if (data.status === 201) {
$content.html(data.message);
}
else {
$status.html(data.message);
}
},
error: function(MLHttpRequest, textStatus, errorThrown) {
$status.html(textStatus);
}
});
}
functions.php
function psc_filter_posts() {
if( !isset( $_POST[\'nonce\'] ) || !wp_verify_nonce( $_POST[\'nonce\'], \'psc\' ) )
die(\'Permission denied\');
$value = intval($_POST[\'params\'][\'value\']);;
$term = sanitize_text_field($_POST[\'params\'][\'term\']);
$page = intval($_POST[\'params\'][\'page\']);
$qty = intval($_POST[\'params\'][\'qty\']);
if ( $value == 0 ) :
$tax_qry[] = [
\'taxonomy\' => \'category\',
\'field\' => \'term_id\',
\'terms\' => $value,
\'operator\' => \'NOT IN\'
];
else :
$tax_qry[] = [
\'taxonomy\' => \'category\',
\'field\' => \'term_id\',
\'terms\' => $value,
];
endif;
//Setup the query args for wp query
$args = [
\'paged\' => $page,
\'post_status\' => \'publish\',
\'posts_per_page\' => $qty,
\'tax_query\' => $tax_qry
];
$qry = new WP_Query($args);
ob_start();
if ($qry->have_posts()) : ?>
<div class="container">
<?php while ($qry->have_posts()) : $qry->the_post(); ?>
LOOP STUFF
<?php endwhile; ?>
</div><!-- .container -->
<nav class = "container mt-5 text-center">
<div class="row">
<div class="col-sm-12">
<?php psc_ajax_pager($qry,$page,$value); ?>
</div><!-- .col-sm-12 -->
</div><!-- .row -->
</nav>
<?php $response = [
\'status\'=> 200,
\'found\' => $qry->found_posts
];
else :
$response = [
\'status\' => 201,
\'message\' => \'No posts found\'
];
endif;
$response[\'content\'] = ob_get_clean();
die(json_encode($response));
}
add_action(\'wp_ajax_filter_posts\', \'psc_filter_posts\');
add_action(\'wp_ajax_nopriv_filter_posts\', \'psc_filter_posts\');
SO网友:Mike Oberdick
尤里卡!因此,我只在函数中添加了第二个ajax调用。出于某种原因,它返回成功,但没有200个响应。不管怎样,它正在发挥作用。如果有人知道为什么会返回未知响应(200或201除外),请分享。谢谢
function get_posts($params) {
$.ajax({
url: psc.ajax_url,
data: {
action: \'get_subcats\',
nonce: psc.nonce,
params: $params
},
type: \'post\',
dataType: \'json\',
success: function(data, textStatus, XMLHttpRequest) {
if (data.status === 200) {
}
else if (data.status === 201) {
alert(\'201\');
$content.html(data.message);
}
else {
$(\'#subcategories\').empty();
$(\'#subcategories\').append(data.content);
}
},
error: function(MLHttpRequest, textStatus, errorThrown) {
$status.html(textStatus);
}
});
$.ajax({
url: psc.ajax_url,
data: {
action: \'filter_posts\',
nonce: psc.nonce,
params: $params
},
type: \'post\',
dataType: \'json\',
success: function(data, textStatus, XMLHttpRequest) {
if (data.status === 200) {
$(\'#ajaxPosts\').html(data.content);
}
else if (data.status === 201) {
$content.html(data.message);
}
else {
$status.html(data.message);
}
},
error: function(MLHttpRequest, textStatus, errorThrown) {
$status.html(textStatus);
}
});
}
functions.php
function psc_subcategories() {
if( !isset( $_POST[\'nonce\'] ) || !wp_verify_nonce( $_POST[\'nonce\'], \'psc\' ) )
die(\'Permission denied\');
$value = intval($_POST[\'params\'][\'value\']);;
ob_start();
$categories= get_categories(\'child_of=\'.$value.\'&hide_empty=1\');
foreach ($categories as $cat) {
$option .= \'<option value="\'.$cat->term_id.\'">\';
$option .= $cat->cat_name;
$option .= \' (\'.$cat->category_count.\')\';
$option .= \'</option>\';
}
echo \'<option value="-1" selected="selected">Subcategory</option>\'.$option;
$response[\'content\'] = ob_get_clean();
die(json_encode($response));
}