php - WordPress AJAX 多数据参数
问题描述
所以我在我的帖子上创建了可过滤性,所以我可以按价格、属性类型等过滤它们。但现在我的任务是让它只显示八个属性,直到单击加载更多按钮,然后再加载八个。我环顾四周,我可以看到我需要在 wp_query 中使用偏移量,然后在我的 js 中将它增加显示的帖子数。但我的问题是我在 AJAX 中定义数据的方式我刚刚使用了 serializeArray() 并且在教程(https://madebydenis.com/ajax-load-posts-on-wordpress/ )中我看到他们正在添加更多数据如下;
data: {
'cat': cat,
'ppp': ppp,
'offset': offset,
'action': 'mytheme_more_post_ajax'
}
有没有办法可以添加 serializeArray() 来获取我的 JSON 数据?还是我应该以另一种方式去做?
这是我完整的 php 和 js 代码,因此您可以看到到目前为止我的过滤器是如何工作的;
函数.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();
}
});
});
});
解决方案
serializeArray创建一个对象数组(又名集合)。您可以像这样简单地将新元素推送到数组上;
// 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 ....
推荐阅读
- c - clang 试图优化这个简单的递归算法是什么?
- vb.net - 连接 URL 时出现 System.Net.WebException
- java - 如何使用 OpenStreetMaps 获取道路的限速?
- html - 滚动时页脚移动 - HTML & CSS
- javascript - 当它被拖到同一天时,有没有办法在全日历中控制事件?
- asp.net-core - ASP NET CORE MVC-Application 和“双注销”
- python - ImportError:使用 Python 库时找不到图像--pymrmr
- r - 每日数据的增长率
- apollo - ApolloClient:optimisticResponse 在更新期间变为“未定义”
- python - Upweight 或为下采样的例子增加权重