我已经研究了几个小时了。大约6个没有休息，我不明白为什么这不起作用。
所以我有了这个形式:
<div id="wp-ajax-filter-search" class="full">
<form action="" method="get">
<div class="flex filters-grid">
<div id="#sortBy" class="flex filters-dropdown">
<p class="filters-title">
Sort By
</p>
<div class="filters-options">
<input class="wp-drop-filter-item" type="radio" id="alphabetically" value="title" name="sort_filter">
<label for="alphabetically">
Alphabetically
</label>
<input class="wp-drop-filter-item" type="radio" id="datenew2old" value="ASC" name="sort_filter">
<label for="datenew2old">
Date Added (New to Old)
</label>
<input class="wp-drop-filter-item" type="radio" id="dateold2new" value="DESC" name="sort_filter">
<label for="dateold2new">
Date Added (Old to New)
</label>
</div>
</div>
<div id="#countries" class="flex filters-dropdown">
<p class="filters-title">
Country
</p>
<?php
// set up a new query for each category, pulling in related posts.
$destinations = new WP_Query(
array(
'showposts' => -1,
'post_type' => 'destinations',
'post_status' => 'publish',
'order_by' => 'title',
'order' => 'ASC'
)
);
if ($destinations->have_posts()):
?>
<div class="filters-options">
<input class="wp-drop-filter-item <?php echo $country_slug ?>" type="radio" id="any" value="any" name="country_filter">
<label for="any">
Any
</label>
<?php while ($destinations->have_posts()) : $destinations->the_post();
global $post;
$post_slug = $post->post_name;?>
<input class="wp-drop-filter-item country-option" type="radio" id="<?php echo $post_slug ?>" value="<?php echo $post->ID ?>" name="country_filter" >
<label for="<?php echo $post_slug; ?>">
<?php echo get_the_title(); ?>
</label>
<?php endwhile; ?>
<?php
// Reset things, for good measure
$destinations = null;
wp_reset_postdata();
?>
</div>
<?php endif; ?>
</div>
<div id="#regions" class="flex filters-dropdown">
<p class="filters-title">
Region <span class="extra">(Choose Country First)</span>
</p>
<?php
// set up a new query for each category, pulling in related posts.
$regions = new WP_Query(
array(
'showposts' => -1,
'post_type' => 'regions',
'post_status' => 'publish',
'order_by' => 'title',
'order' => 'ASC'
)
);
if ($regions->have_posts()):
?>
<div class="filters-options">
<input class="wp-drop-filter-item" type="radio" id="any-region" value="any" name="region_filter">
<label class="region-option" for="any-region">
Any
</label>
<?php while ($regions->have_posts()) : $regions->the_post();
global $post;
$post_slug = $post->post_name;
$country = get_field( "country", $post );
$country_slug = get_post_field( 'post_name', $country ); ?>
<input class="wp-drop-filter-item" type="radio" id="<?php echo $post_slug ?>" value="<?php echo $post->ID ?>" name="region_filter">
<label class="region-option <?php echo $country_slug ?>" for="<?php echo $post_slug; ?>">
<?php echo get_the_title(); ?>
</label>
<?php endwhile; ?>
<?php
// Reset things, for good measure
$regions = null;
wp_reset_postdata();
?>
</div>
<?php endif; ?>
</div>
</div>
</form>
<ul id="ajax_filter_search_results" class="destinations grid"></ul>
</div>
当你改变其中一个单选按钮时，AJAX将使用以下JS代码触发:
var wpmafs = $("#wp-ajax-filter-search");
var wpmafsForm = wpmafs.find("form");
$(".wp-drop-filter-item").on("change",function(e){
e.preventDefault();
var sort_filter = $("input[name='sort_filter']:checked").val();
var country_filter = $("input[name='country_filter']:checked").val();
var region_filter = $("input[name='region_filter']:checked").val();
var data = {
action : "wp_ajax_filter_search",
sort_filter : sort_filter,
country_filter : country_filter,
region_filter : region_filter
};
console.log(data);
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
grid = $( "#ajax_filter_search_results" );
wpmafs.find(grid).empty();
if(response) {
for(var i = 0 ; i < response.length ; i++) {
var html = '<a class="grid-item destination" href="' + response[i].permalink + '">';
html += '<p class="grid-item-title">' + response[i].title + '</p>';
html += '<ul class="features">';
var features = response[i].features;
for(var k = 0 ; k < features.length ; k++){
if(k > 3) break;
html += '<li> <img width="8" height="8" src="/wp-content/uploads/2022/03/golf-escapes-sussex-uk-packages-benefits-copy.svg" class="attachment-medium size-medium">' + features[k]['point'] + '</li>';
}
html += '</ul>';
html += '<div class="bg-img">';
html += '<img src="' + response[i].image_url + '">';
html += '</div>';
html += '</a>';
wpmafs.find(grid).append(html);
}
} else {
var html = "<li class='no-result'>No matches found. Try a different filter.</li>";
wpmafs.find(grid).append(html);
}
},
error: function() {
grid = $( "#ajax_filter_search_results" );
wpmafs.find(grid).empty();
var html = "<li class='no-result'>It appears we're having some technical difficulties. Please try again shortly or call us.</li>";
wpmafs.find(grid).append(html);
}
});
});
这是AJAX函数:
function wp_ajax_filter_search_callback() {
header("Content-Type: application/json");
if(isset($GET['sort_filter'])) {
$sortval = $GET['sort_filter'];
if($sortval == 'title'){
$orderby = $sortval;
$order = 'ASC';
} elseif ($sortval == 'ASC' || $sortval == 'DESC'){
$orderby = 'date';
$order = $sortval;
} else {
$orderby = 'title';
$order = 'ASC';
}
};
if(isset($_GET['country_filter'])) {
$location = $_GET['country_filter'];
if ($location != 'any'){
$loc_query[] = array(
'key' => 'country',
'value' => $location,
'compare' => "IN",
);
}
};
if(isset($_GET['region_filter'])) {
$region = $_GET['region_filter'];
if ($region != 'any'){
$region_query[] = array(
'key' => 'region',
'value' => $region,
'compare' => "IN",
);
}
};
$meta_query = array(
'relation' => 'AND',
$loc_query,
$region_query,
);
$args = array(
'post_type' => 'hotels',
'post_status' => 'publish',
'posts_per_page' => -1,
'orderby' => $orderby,
'order' => $order,
'meta_query' => $meta_query
);
$search_query = new WP_Query( $args );
if ( $search_query->have_posts() ) {
$result = array();
while ( $search_query->have_posts() ) {
$search_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"permalink" => get_permalink(),
"image_url" => get_the_post_thumbnail_url('', 'medium-large'),
"features" => get_field('featured_offer')
);
}
wp_reset_query();
echo json_encode($result);
} else {
}
wp_die();
}
我以前在另一个网站上使用过这个代码，所以我知道它可以工作，但在这个实例中它不起作用。
country_filter和region_filter单选按钮正常工作。当您更改它们时，AJAX调用将运行，并且实际上过滤了wp_query。
然而，问题是sort_filter单选按钮由于某种原因不能工作。
所以，为了测试，我一直把print_r("some random bit of text")和检查网络选项卡在我的浏览器检查器，看看该文本是否出现在请求。在if(isset($_GET['country_filter']))和if(isset($_GET['region_filter']))下，显示文本。但是，如果我把它放在if(isset($_GET['sort_filter']))下，它就不显示了。
所以，很明显，AJAX代码到达if(isset($_GET['sort_filter']))行并说"不，它没有设置"。
如果我在JS代码中使用console.log()来记录正在发送到AJAX调用的数据，我可以清楚地看到所选择的sort_filter单选按钮的值正在发送:
{action: 'wp_ajax_filter_search', sort_filter: 'title', country_filter: undefined, region_filter: undefined}
Network选项卡中的请求URL也包含该信息，例如:
https://my.staging.url/wp-admin/admin-ajax.php?action=wp_ajax_filter_search&sort_filter=title
尽管如此，我无法获得AJAX代码$ get sort_filter单选按钮值，并在WP_Query中使用它。
任何帮助都是非常感激的。我要去睡一会儿，因为我已经完全把自己累垮了，但我期待着看到任何人可以提供什么帮助，因为这真的把我逼上了墙，最后期限很快就要到了。
提前万分感谢!
在您的ajax回调函数
if(isset($GET['sort_filter'])) {
$sortval = $GET['sort_filter'];
应该是
if(isset($_GET['sort_filter'])) {
$sortval = $_GET['sort_filter'];
如果您错过了对$_GET
的两次调用中的_