我创建了一个前端过滤器，用于修改网址中的查询变量。
http://example.com/events/?zone=strength&days=28th&locations=136
区域和天数是分类法，location是来自自定义字段的元查询。
我有3个选择输入，其中包含每个查询var的列表，当您选择其中一个页面时，页面会在网址中重新加载新查询，并且按预期工作。
一切正常，但我认为让ajax重新加载循环而不是完整的页面加载会使它更好。
我的jQuery（可能写得不好）：
// function to split up URL queries
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i=0; i<vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
// on ready, set the select values to the url queries
var zone = getQueryVariable('zone');
var days = getQueryVariable('days');
var locations = getQueryVariable('locations');
if(zone) {
$(".event-filter .zone").val(zone);
}
if(days) {
$(".event-filter .day").val(days);
}
if(locations) {
$(".event-filter .location").val(locations);
}
// on select change, detect what changed and update url
jQuery('.event-filter select').on('change', function() {
var params = {};
if($(".event-filter .zone option:selected").val() != 'zone'){
var zone = $(".event-filter .zone option:selected").val();
params['zone'] = zone;
}
if($(".event-filter .day option:selected").val() != 'day'){
var days = $(".event-filter .day option:selected").val()
params['days'] = days;
}
if($(".event-filter .location option:selected").val() != 'location'){
var locations = $(".event-filter .location option:selected").val()
params['locations'] = locations;
}
// create new url
var path = window.location.pathname;
if ($.isEmptyObject(params)) {
var new_url = path;
} else {
var new_url = path + '?' + jQuery.param(params);
}
// reload page
window.location.href = new_url;
});
我想将new_url变量作为带有ajax的url重新加载，并使用新的查询变量再次运行循环。
My Loop：
// Check if query vars are being used in the URL.
$days = get_query_var('days',FALSE);
$zone = get_query_var('zone',FALSE);
// Created tax_query array, supporting multiple arrays where all conditions must be met
$tax_query = array('relation' => 'AND');
// Set days variable with terms from the query var in url
if( ($days) ) {
$tax_query[] = array(
'taxonomy' => 'day',
'field' => 'slug',
'terms' => $days,
);
}
// Set zone variable with terms from the query var in url
if( ($zone)) {
$tax_query[] = array(
taxonomy' => 'zone',
'field' => 'slug',
'terms' => $zone,
);
}
// Check if locations query var is used
if(isset($_GET['locations']) && !empty($_GET['locations'])){
$locations[] = array(
'key' => 'event_location',
'value' => $_GET['locations'],
'compare' => 'IN'
);
}
// Load both taxonomy query and meta query arrays into their respective args!
$args = array(
'post_type' => 'event',
'posts_per_page' => -1,
'tax_query' => $tax_query,
'meta_query' => $locations
);
$events = new WP_Query( $args );?>
我的想法是我应该用上面的循环创建一个函数，只要用jQuery / ajax改变select字段就会调用它，而不是重新加载页面。这是对的吗？
如何从更改的new_url jquery变量中仅加载包含循环的部分而不加载整个页面？
答案 0 :(得分：1)
好的，您希望调整当前的方法，用AJAX解决方案替换重定向（重新加载）。
如何从更改的new_url jquery变量中仅加载包含循环的部分而不加载整个页面？
让我们考虑一下处理：
$.post()返回服务器的数据包的一部分。 $.post您将参数发送到服务器。然后服务器检查安全性随机数。如果没关系，可以运行PHP代码来获取查询并构建事件HTML。die()或wp_die()。 $.post接收响应，即新的HTML字符串。然后，您将删除旧的HTML并将其替换为新的。还在我身边吗？让我们来看看将代码转换为新方法所需要做的事情。我写了一个答案，向另一个PO解释，you can find it here。
AJAX需要一个URL来与服务器通话。在WordPress中，我们使用admin-ajax.php文件。当您入队时，您将需要本地化参数以将其从服务器传递到脚本。
wp_enqueue_script( 'your-script-handle', 'path-to/filename.js', array('jquery'), $version );
wp_localize_script( 'your-script-handle', 'eventParams', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
));
请注意，localize命令的目标是在您将脚本排入队列时为其提供的句柄。它的作用是：
eventParams 在脚本中，您将收到使用admin ajax URL，如下所示：
$.post( eventParams.ajaxurl, dataPacket, function(htmlResponse) {
});
接下来，您需要添加一个nonce以确保安全性。我建议添加hidden input field。
jQuery $.post()构造将数据包传递给服务器。您可以在上面看到我将其设置为名为dataPacket的变量。您需要在运行$.post()之前构建该对象。
我已将您的代码作为起点进行调整：
(function($, window, document){
"use strict";
var init = function() {
$('.event-filter select').on('change', eventSelectHandler);
}
var eventSelectHandler = function() {
var dataPacket = {
action: 'event_filter',
security: getSecurity(),
zone: getZone(),
days: getDay(),
locations: getLocation()
};
$.post( eventParams.ajaxurl, dataPacket, function(htmlResponse) {
// add your processing code
});
}
function getSecurity() {
// you'll grab that from the nonce field and then
// return it.
}
function getZone() {
return getSelected( '.zone', 'zone' );
}
function getDay() {
return getSelected( '.day', 'day' );
}
function getLocation() {
return getSelected( '.location', 'location' );
}
function getSelected( classAttribute, compareValue ) {
var $element = $( ".event-filter " + classAttribute + " option:selected");
if ( $element.length < 1 ) {
return '';
}
var optionSelected = $element.val();
if ( optionSelected != compareValue ) {
return optionSelected;
}
return '';
}
$(document).ready(function(){
init();
});
}(jQuery, window, document));
查看函数eventSelectHandler()。请注意，您首先要构建数据包。然后，一旦你构建它，它就会被传递到$.post。
现在在PHP方面，您需要为WordPress AJAX事件注册一个回调函数。这些由您在数据包中提供的操作名称确定。
您将为登录用户使用wp_ajax_{your action name}，为访客使用wp_ajax_nopriv_{your action name}。
看起来像这样：
add_action( 'wp_ajax_event_filter', 'process_event_filter_ajax_request' );
add_action( 'wp_ajax_nopriv_event_filter', 'process_event_filter_ajax_request' );
function process_event_filter_ajax_request() {
// Check the security nonce first
// If it fails, it returns immediately.
// The parameters are in $_POST['zone']
$zone = strip_tags( $_POST['zone'] );
$days = strip_tags( $_POST['days'] );
$location = strip_tags( $_POST['location'] );
// do your work here
// build the HTML
wp_die();
}
使用WP_Query处理的代码将成为上述AJAX处理的一部分。您需要将代码调整为上述回调。
这应该足以让你开始走上正轨。