Question

我尝试使用单选按钮制作Ajax后置过滤器。这样用户就可以使用单选按钮过滤多个类别。

这是我使用的代码：

前端表格：

<form id="filter">
            <?php
                if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
                foreach ( $terms as $term ) :
                    echo '<input type="checkbox" name="category[]" value="' . $term->term_id . '" class="br">' . $term->name;
                    echo '';
                endforeach;
                endif;
            ?>
            <div class="filter-output"></div>
        </form>

Script.js：

jQuery(document).ready(function($){
    $('#filter .br').click(function(){

        // Declaratie van 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', // Naam van de PHP functie
                'choices' : choices,
            },
            success: function (result) {
                $('.filter-output').append(result);
                // Voor testen - Resultaat (Kan later verwijderd worden)
                //console.log(Resultaat);
                //console.log(Keuzes);
            },
            error: function(err){
                // Voor testen - Error (Kan later verwijderd worden)
                console.log(err);
                console.log(choices);
            }
        });
    })
});

Functions.php：

add_action('wp_ajax_call_post', 'call_post');
add_action('wp_ajax_nopriv_call_post', 'call_post');

function call_post(){

// Verkijgen van AJAX data:
$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(); }

但我一直收到以下错误：

script.js：20未捕获的ReferenceError：未定义ajaxobject

我不确定如何解决它。所以我希望有人可以帮助我。我对AJAX的经验很少，这就是我寻求帮助的原因。

链接到网站： http://5.79.72.162/~delta/category/vacancies/

Answer 1

错误清楚地表明了这里的问题。 “ajaxobject”似乎没有在共享代码段中定义。该错误与AJAX无关，但更多的Javascript变量在使用前未分配。

您需要通过Javascript代码定义ajaxobject，然后在其中设置'ajaxurl'。

    jQuery(document).ready(function($){
    $('#filter .br').click(function(){

        // Declaratie van 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);
        });

        // Define ajaxobject
        var ajaxobject = {
            ajaxurl: "your_web_service_url"
        };
        console.log(choices);
        $.ajax({
            url: ajaxobject.ajaxurl,
            type :'POST',
            data : {
                'action' : 'call_post', // Naam van de PHP functie
                'choices' : choices,
            },
            success: function (result) {
                $('.filter-output').append(result);
                // Voor testen - Resultaat (Kan later verwijderd worden)
                //console.log(Resultaat);
                //console.log(Keuzes);
            },
            error: function(err){
                // Voor testen - Error (Kan later verwijderd worden)
                console.log(err);
                console.log(choices);
            }
        });
    })
});

Ajax过滤器与Wordpress中的单选按钮

1 个答案: