使用Ajax posts筛选器获取带有多选择复选框的帖子

Question

我正试图用一个使用多选择复选框的表单来实现ajax post过滤器。我已经缩短了表单，只有3个组，每组4个复选框(而不是11个组)。

这里，我的过滤器有3个brand，ram和price，的组(主键)，每个组有4个不同的键/值(复选框)。可以选中组中的每个复选框(多项选择)。

下面是该项目的实时链接，如果您使用浏览器控制台工具进行检查，您将看到数据由jQuery正确发送，并由my函数接收。

这是工作的：

带有所有复选框的HTML文件在我的ajax jQuery脚本中运行良好，将正确的发送一个键/值数组给我的php函数。我正确地注册了我的jQuery脚本并使用了

接收到的数据数组(对于两个复选框，例如同一个组)

$choices = array( 'brand1' => 'Nokia', 'brand3' => 'Sony' );**`wp_localize_script()`**…

未起作用的东西：

• 为WP_query()准备数据
• 查询本身的$args数组

如何管理call_post()函数，然后使用循环从JS和disply posts中获取值？？**

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>

content.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>'; 
 ?>

Answer 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();
}