php - 使用带有多选复选框的 Ajax 帖子过滤器获取帖子

Question

我正在尝试通过使用多选复选框 的表单实现ajax 后置过滤器。 我已将表单缩短为只有 3 组，每组 4 个复选框(而不是 11 组)。

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

Here is the live link for this project, and if you check with your browser console tools, you will see that the data is correctly sent by jQuery and received by my php function.

这是有效的:
包含所有复选框的 HTML 文件与我的 ajax jQuery 脚本一起工作正常，它正确发送 一组键/值到我的 php 函数.我已经正确注册了我的 jQuery 脚本并使用了

接收到的数据数组 (对于同一组的 2 个选中复选框的示例):

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

What is not working yet:
- Prepare the data for the WP_query()
- The query herself $args array

如何管理 call_post() 函数，然后它从 JS 获取值并使用循环显示帖子？？**

The PHP code in function.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();
}

Script

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 (shortened)

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