duankekan9269 2018-06-19 11:02
浏览 123
已采纳

WordPress AJAX多个数据参数

So I have created filterability on my posts so I can filter them by price, property type ect. But now I have been tasked with also making it so that only eight properties will show until a load more button is clicked then eight more will load. I have looked around and I can see that I need to use offset in the wp_query then increment it in my js by the number of posts shown. But my issues is the way I have defined my data in AJAX I have just used serializeArray() and in the tutorials (https://madebydenis.com/ajax-load-posts-on-wordpress/)I have seen they are adding more to the data like below;

data: {
    'cat': cat,
    'ppp': ppp,
    'offset': offset,
    'action': 'mytheme_more_post_ajax'
}

Is there a way I can add serializeArray() to this to fetch my JSON data? or should I go about this another way?

Here's my full php and js code so you can see how I have got my filters to work so far;

functions.php

function custom_js_css(){
    wp_enqueue_script('all_js', get_template_directory_uri() . '/js/all.min.js', 'jquery', '1.0', true);
    wp_localize_script( 'all_js', 'ajax_url', admin_url('admin-ajax.php') );
}
add_action('wp_enqueue_scripts', 'custom_js_css');

add_action('wp_ajax_forsalefilter', 'for_sale_filter');
add_action('wp_ajax_nopriv_forsalefilter', 'for_sale_filter');

function for_sale_filter(){
    $posts = array(
        'posts_per_page'    =>  -1,
        'post_type'         =>  'property',
        'orderby'           =>  'date',
        'meta_key'          =>  'property_status',
        'meta_value'        =>  'For Sale',
    );

    $posts['meta_query'] = array( 'relation' => 'AND' );

    // price filtering
    if($_GET['min_price'] && !empty($_GET['min_price'])){
        $min_price = $_GET['min_price'];
    }else{
        $min_price = 0;
    }

    if($_GET['max_price'] && !empty($_GET['max_price'])){
        $max_price = $_GET['max_price'];
    }else{
        $max_price = 10000000;
    }

    $posts['meta_query'][] = array(
        'key'       => 'property_price',
        'type'      => 'NUMERIC',
        'value'     => array($min_price, $max_price),
        'compare'   => 'BETWEEN'
    );

    // bed filtering

    if($_GET['min_beds'] && !empty($_GET['min_beds'])){
        $min_beds = $_GET['min_beds'];
    }else{
        $min_beds = '1'; 
    }

    if($_GET['max_beds'] && !empty($_GET['max_beds'])){
        $max_beds = $_GET['max_beds'];
    }else{
        $max_beds = '9+'; 
    }

    $posts['meta_query'][] = array(
        'key'       => 'bedrooms',
        'value'     => array($min_beds, $max_beds),
        'compare'   => 'BETWEEN'
    );

    //location filtering

    if(isset( $_GET['location'] ) && $_GET['location']){
        $location = $_GET['location'];
        $location_val = stripslashes($location);

        $posts['meta_query'][] = array(
            'relation'  => 'OR',
            array(
                'key'       => 'street',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'town',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'county',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            ),

            array(
                'key'       => 'postcode',
                'value'     => $location_val,
                'compare'   => 'LIKE'
            )
        );                          
    }

    // property type filtering
    if(isset( $_GET['type'] ) && $_GET['type']){
        $posts['meta_query'][] = array(
            'key'       => 'type_of_property',
            'value'     => $_GET['type'],
            'compare'   => 'IN'
        );
    }

    // secondary flash filtering
    if(isset( $_GET['flash_type'] ) && $_GET['flash_type']){
        $posts['meta_query'][] = array(
            'key'       => 'optional_category',
            'value'     => $_GET['flash_type'],
            'compare'   => 'IN'
        );
    }

    $query = new WP_Query( $posts );

    if( $query->have_posts() ){
        $result = array();

        while( $query->have_posts() ){
            $query->the_post();

            $main_field = get_field('images');
            $first_row = $main_field[0];
            $img = $first_row['image'];
            $img_med = $img['sizes']['medium'];

            $result[] = array(
                "permalink" =>  get_permalink(),
                "image"     =>  $img_med,
                "property_type" =>  get_field('type_of_property'),
                "bedrooms"      => get_field('bedrooms'),
                "street"        => get_field('street'),
                "town"          =>  get_field('town'),
                "price"         =>  get_field('property_price'),
                "second_flash"  =>  get_field('optional_category'),
                "status"        =>  get_field('property_status')
            );
        }
        echo json_encode($result);
    }
    wp_die();
}

js

jQuery(function($){
    $('#filters').submit(function(e){
        e.preventDefault();

        var filter = $('#filters');
        var root_dir = document.location.origin;

        $.ajax({
            url: ajax_url,
            data: filter.serializeArray(), // form data
            dataType: 'json',
            beforeSend:function(xhr){
                $('#properties').html("\
                    <div id='property_preloader'>\
                      <div id='gif'>\
                            <img src='http://domain.co.uk/wp-content/themes/dist/imgs/preloader.gif' alt='Preloader Icon'>\
                        </div>\
                    </div>"
                 );
            },
            success:function(response){
                $('#response').empty();
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");

                for(var i = 0; i < response.length; i++){
                    var status = response[i].status;
                    var flash_url;

                    if(response[i].status == "For Sale"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/forsale.svg';
                    }else if(response[i].status == "Sold"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sold.svg';
                    }else{
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sstc.svg';
                    }

                    var html =""+
                        "<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
                            "<div class='shadowwrapper2'>" +
                                "<a href='" + response[i].permalink + "'>" +
                                    "<div class='propertywrapper'>" +
                                        "<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
                                        "<span class='second_flash'>" + response[i].second_flash + "</span>" +
                                    "</div>" +
                                    "<div class='cornerflash'><img src='" + flash_url + "' alt='corner flash'></div>" +
                                    "<div class='propertyinfo'>" +
                                        "<div class='row m-0'>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
                                        "</div>" +
                                    "</div>" +
                                    "<div class='streetpricewrapper'>" +
                                        "<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
                                        "<p class='price'>£" + response[i].price + "</p>" + 
                                    "</div>" +                    
                                "</a>" +
                            "</div>" +
                        "</div>";

                    $('#response').append(html);
                }
                crumb(); 
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");

                var html = "<div class='col-12'><p>Sorry we found no results for your search. Please try widen your search</p></div>";
                $('#response').html(html);
                crumb();
            } 
        });
    });
});
  • 写回答

1条回答 默认 最新

  • duanche4578 2018-06-19 11:39
    关注

    serializeArray creates an array of objects (aka a collection). You can simply push new elements onto the array, like so;

        // using $ notation in variable to indicate a jQuery object
        var $filter = $('#filters');
        // serialize here, so you can add to it before passing in AJAX call...
        var filter = $filter.serializeArray();
        filter.push({ offset: 2 }); // or whatever offset you need to push on....
        // you could add more here if needed....
        filter.push( { other_value: 'foo' } );
    
        var root_dir = document.location.origin;
    
        $.ajax({
            url: ajax_url,
            // send the filter variable here, instead of serializing here...
            data: filter,
            // .... remainder of your code ....
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形