使用带有多选复选框的 Ajax 帖子过滤器获取帖子
Posted
技术标签:
【中文标题】使用带有多选复选框的 Ajax 帖子过滤器获取帖子【英文标题】：Get posts with Ajax posts filter with multi selection checkboxes 【发布时间】：2017-01-01 00:14:32 【问题描述】：我正在尝试使用 多选复选框 的表单来实现 ajax 后置过滤器。 我已经缩短了表格，只有 3 组，每组 4 个复选框（而不是 11 组）。
我的过滤器有 3 个组 （主键），它们是 brand、ram和 price，每个组都有 4 个不同的键/值（复选框）。组中的每个复选框都可以选中（多选）
这里是这个项目的实时链接，如果你用浏览器控制台工具检查，你会看到数据是由 jQuery 正确发送并由我的 php 函数接收的。
这是有效的：
带有所有复选框的 html 文件在我的 ajax jQuery 脚本中运行良好，它正确地 向我的 php 函数发送了一个键/值数组。我已经正确注册了我的 jQuery 脚本并使用了
接收到的数据数组 （对于同一组的2个选中复选框）：
$choices = array( 'brand1' => 'Nokia', 'brand3' => 'Sony' );**`wp_localize_script()`**…
什么还没有起作用： - 为
WP_query()准备数据 - 查询自己$args数组
如何管理 call_post() 函数，然后从 JS 中获取值并使用循环显示帖子？**
function.php中的PHP代码：
add_action('wp_ajax_call_post', 'call_post');
add_action('wp_ajax_nopriv_call_post', 'call_post');
function call_post()
$choices = $_POST['choices'];
print_r($_POST['choices']);
foreach($choices as $name => $choice)
$fam = explode('-', $name);
$family = $fam[0];
$args = array(
'post_type' => 'post',
array(
'key' => 'brand',
'value' => $brand,
) ,
array(
'key' => 'ram',
'value' => $ram,
) ,
array(
'key' => 'price',
'value' => $price,
) ,
);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo file_get_contents(locate_template("content.php"));
endwhile;
wp_reset_query();
else :
wp_send_json($query->posts);
endif;
die();
脚本
jQuery(document).ready(function($)
$('#phones-filter .br').click(function()
var choices = ; // declaring an empty array
var choice = $(this).attr('name');
$('.contents').remove();
$('.filter-output').empty();
// scanning each checkbox for checked state data
$('div > li > .br').each(function(index, obj)
if($(this).prop('checked'))
var name = $(this).attr('name'), val = $(this).val();
choices[name] = val;
);
$.ajax(
url: ajaxobject.ajaxurl,
type :'POST',
data :
'action' : 'call_post',
'choices' : choices,
,
success: function (result)
$(choice).appendTo('.filter-output');
console.log(result);
console.log(choices);
,
error: function(err)
console.log(err);
console.log(choices);
);
)
);
Form.php （缩短）
<form id="phones-filter" >
<div class="brand">
<li><input type="checkbox" name="brand-1" value="Nokia" class="br"> NOKIA </li>
<li><input type="checkbox" name="brand-2" value="LG" class="br"> LG </li>
<li><input type="checkbox" name="brand-3" value="Sony" class="br"> Sony </li>
<li><input type="checkbox" name="brand-4" value="Apple" class="br"> Apple </li>
</div>
<div class="ram">
<li> <input type="checkbox" name="ram-1" value="1GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram-2" value="2GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram-3" value="3GB" class="br"> 2 GB </li>
<li><input type="checkbox" name="ram-3" value="4GB" class="br"> 4 GB </li>
</div>
<div class="price">
<li><input type="checkbox" name="price-1" value="$100" class="br"> $100 </li>
<li><input type="checkbox" name="price-2" value="$200" class="br"> $200 </li>
<li><input type="checkbox" name="price-3" value="$300" class="br"> $300 </li>
<li><input type="checkbox" name="price-4" value="$500" class="br"> $400 </li>
</div>
<div class="filter-output"></div>
</form>
内容.php
<div <?php post_class( 'col-lg-2 col-md-2 col-sm-3 col-xs-6 ' ); ?> id="post-<?php the_ID(); ?>">
<div class="single-post">
<div class="post-thumb" >
<a href="<?php echo esc_url( post_permalink() ); ?>">
<?php the_post_thumbnail ( 'large', array(
'class' => 'img-responsive'
) ); ?>
</a>
</div>
<div class="post-info">
<div class="post-title"><li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title(); ?></a></li></div>
<div class="rs"><p><?php echo get_post_meta( get_the_ID(), 'price', true ); ?><?php _e( '', 'mobilewebsite' ); ?></p></div>
</div>
</div>
</div>
<?php $item_number++;
if( $item_number % 2 == 0 ) echo '<div class="clearfix visible-xs-block"></div>';
if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-sm-block"></div>';
if( $item_number % 6 == 0 ) echo '<div class="clearfix visible-md-block"></div>';
if( $item_number % 6 == 0 ) echo '<div class="clearfix visible-md-block"></div>';
?>
【问题讨论】：
get_template_part('content');是返回html吗？ @vel 没有任何回报， 你应该打印内容，否则ajax响应将为空 请说清楚，或者给我答案 让我有时给。 【参考方案1】：试试下面的代码
<form id='test' >
<strong>Brand</strong>
<div class="brand">
<li><input type="checkbox" name="brand" value="Nokia" class="br"> NOKIA </li>
<li><input type="checkbox" name="brand" value="LG" class="br"> LG </li>
<li><input type="checkbox" name="brand" value="Sony" class="br"> Sony </li>
<li><input type="checkbox" name="brand" value="Apple" class="br"> Apple </li>
</div>
<strong>Ram</strong>
<div class="ram">
<li> <input type="checkbox" name="ram" value="1GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram" value="2GB" class="br"> 1 GB </li>
<li><input type="checkbox" name="ram" value="3GB" class="br"> 2 GB </li>
<li><input type="checkbox" name="ram" value="4GB" class="br"> 4 GB </li>
</div>
<strong>Price</strong>
<div class="price">
<li><input type="checkbox" name="price" value="$100" class="br"> $100 </li>
<li><input type="checkbox" name="price" value="$200" class="br"> $200 </li>
<li><input type="checkbox" name="price" value="$300" class="br"> $300 </li>
<li><input type="checkbox" name="price" value="$500" class="br"> $400 </li>
</div>
</form>
jQuery(document).ready(function($)
$('#test .br').click(function()
// declaring an array
var choices = ;
$('.contents').remove();
$('.filter-output').empty()
$('input[type=checkbox]:checked').each(function()
if (!choices.hasOwnProperty(this.name))
choices[this.name] = [this.value];
else
choices[this.name].push(this.value);
);
console.log(choices);
$.ajax(
url: ajaxobject.ajaxurl,
type :'POST',
data :
'action' : 'call_post', // the php name function
'choices' : choices,
,
success: function (result)
$('.filter-output').append(result);
// just for test - success (you can remove it later)
//console.log(result);
//console.log(choices);
,
error: function(err)
// just for test - error (you can remove it later)
console.log(err);
console.log(choices);
);
)
);
add_action('wp_ajax_call_post', 'call_post');
add_action('wp_ajax_nopriv_call_post', 'call_post');
function call_post()
// Getting the ajax data:
// An array of keys("name")/values of each "checked" checkbox
$choices = $_POST['choices'];
$meta_query = array('relation' => 'OR');
foreach($choices as $Key=>$Value)
if(count($Value))
foreach ($Value as $Inkey => $Invalue)
$meta_query[] = array( 'key' => $Key, 'value' => $Invalue, 'compare' => '=' );
$args = array(
'post_type' => 'post',
'meta_query' =>$meta_query
);
$query = new WP_Query($args);
//if( ! empty ($params['template']))
////$template = $params['template'];
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
get_template_part('content');
endwhile;
wp_reset_query();
else :
wp_send_json($query->posts);
endif;
//
die();
【讨论】：
以上是关于使用带有多选复选框的 Ajax 帖子过滤器获取帖子的主要内容，如果未能解决你的问题，请参考以下文章
使用下拉菜单动态过滤 Wordpress 帖子（使用 php 和 ajax）