如何通过一个 ajax 调用执行两个操作 - WordPress
Posted
技术标签:
【中文标题】如何通过一个 ajax 调用执行两个操作 - WordPress【英文标题】：How to execute two actions with one ajax call - WordPress 【发布时间】：2020-10-20 09:39:53 【问题描述】：我的页面中有一个“旅游”部分。
游览有 2 个过滤器（选择输入）。 “destino”和“durasion”（位置和持续时间）
到目前为止，我使用 ajax 制作了一个过滤器，并在您选择“destino”后使用新的游览更新“#result”id。
但我也想用新选项更新“durasion”选择（基于选择的 destino）。
问题是，我不知道如何执行两个动作并在两个不同的地方做出响应。
html 部分：（这里我有两个动作，它只执行最后一个）
<form class="filtros righter" action="**********/wp-admin/admin-ajax.php" method="POST" id="filtro">
<input type="hidden" name="action" value="filtertoursajax">
<input type="hidden" name="action" value="filterduracionajax">
<input type="hidden" name="filtrodestino" value="salar-de-uyuni">
<div class="select-holder">
<label class="">Categoría</label>
<select name="categoriafilter" id="categoriafilter">
<option disabled="" selected="" value="0"> </option>
<option value="0">Todas las categorías</option>
<option value="11">Clásicos</option>
<option value="33">Elite</option>
</select>
</div>
<div class="select-holder">
<label>Duración del viaje</label>
<select name="duracionfilter" id="resultselect">
<option disabled="" selected="" value="0"> </option>
<option value="0">Todas las duraciones</option>
</select>
</div>
</form>
js部分：
<script>
jQuery(function myFunction()
$('#filtro').change(function()
var filter = $('#filtro');
$.ajax(
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr, data)
filter.find('button').text('Processing...'); // changing the button label
,
success:function(data)
filter.find('button').text('Apply filter'); // changing the button label back
$('#response').html(data); // insert data
console.log(data);
,
error: function(req, err) console.log(err);
);
return false;
);
);
PHP 动作 1：
add_action('wp_ajax_filtertoursajax', 'filtertoursajax');
add_action('wp_ajax_nopriv_filtertoursajax', 'filtertoursajax');
function filtertoursajax()
$args = array(
'post_type' => 'tours',
'orderby' => 'menu_order',
'order' => 'ASC',
'post_per_page' => -1,
);
if( isset($_POST['filtrodestino']) && $_POST['filtrodestino'] )
// for taxonomies / categoria
if( isset( $_POST['filtrodestino'] ) )
$args['tax_query'][] =
array(
'taxonomy' => 'destino',
'field' => 'slug',
'terms' => $_POST['filtrodestino']
);
if( isset($_POST['categoriafilter']) && $_POST['categoriafilter'] )
// for taxonomies / categoria
$args['tax_query'][] =
array(
'taxonomy' => 'categoria',
'field' => 'id',
'terms' => $_POST['categoriafilter']
);
$query = new WP_Query( $args );
if( $query->have_posts() ) :
print_r($args);
while( $query->have_posts() ): $query->the_post();
$postid = $query->post->ID;
$taxonomy = 'destino';
$terms = get_the_terms( get_the_ID(), $taxonomy );
if ( $terms && ! is_wp_error( $terms ) ) :
$term_links = array();
foreach ( $terms as $term )
$term_links[] = '<a href="' . esc_attr( get_term_link( $term->slug, $taxonomy ) ) . '">' . __( $term->name ) . '</a>';
$all_terms = join( ', ', $term_links );
$destinos = '<span class="terms-' . esc_attr( $term->slug ) . '">' . __( $all_terms ) . '</span>';
endif;
?>
<div class="box">
<div class="box__image flexer">
<?php echo wp_get_attachment_image( get_field( "foto_portada", $postid ), array('276', '180'), "", array( "class" => "img-responsive" ) ); ?>
</div>
<div class="box__content pz-1">
<span class="placeholder mb-1"><?php echo $destinos; ?></span>
<h6 class="long-title mb-2"><?php echo $query->post->post_title; ?></h6>
<div class="icon-btn"><?php $path = get_template_directory_uri().'/images/plane-icon.svg'; echo file_get_contents($path); ?>Duración: <?php echo get_field( "duracion_texto", $postid ); ?></div>
</div>
<a href="<?php echo the_permalink(); ?>" class="text-btn pl-1">Ver ficha<?php $path = get_template_directory_uri().'/images/arrow-btn.svg'; echo file_get_contents($path); ?></a>
</div>
<?php endwhile;
wp_reset_postdata();
else:
echo 'Sin resultados';
print_r($args);
endif;
die();
PHP 动作 2：
add_action('wp_ajax_filterduracionajax', 'filterduracionajax'); //
add_action('wp_ajax_nopriv_filterduracionajax', 'filterduracionajax');
function filterduracionajax()
if( $args = array(
'posts_per_page' => -1,
'hide_empty' => 1,
'post_type' => 'tours',
'meta_key' => 'dias',
'orderby' => 'meta_value',
'order' => 'ASC',
) ) :
// create $args['tax_query'] array if one of the following fields is filled
if( isset($_POST['filtrodestino']) && $_POST['filtrodestino'] )
// for taxonomies / categoria
if( isset( $_POST['filtrodestino'] ) )
$args['tax_query'][] =
array(
'taxonomy' => 'destino',
'field' => 'slug',
'terms' => $_POST['filtrodestino']
);
// create $args['tax_query'] array if one of the following fields is filled
if( isset($_POST['categoriafilter']) && $_POST['categoriafilter'] )
// for taxonomies / categoria
$args['tax_query'][] =
array(
'taxonomy' => 'categoria',
'field' => 'id',
'terms' => $_POST['categoriafilter']
);
// query
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ): ?>
<div class="select-holder">
<label>Duración del viaje</label>
<select name="duracionfilter" id="resultselect">
<option disabled="" selected="" value="0"> </option>
<option value="0" >Todas las duraciones</option>
<?php $unique_dias = array();
while( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $dias = get_field('dias');
if( ! in_array( $dias, $unique_dias ) ) :
$unique_dias[] = $dias; ?>
<?php endif;
endwhile;
natsort($unique_dias);
foreach ( $unique_dias as $duraciones ) :
echo '<option value="'.$duraciones.'">'.$duraciones.'</option>';
endforeach;
?>
</select></div>
<?php endif;
endif;
die();
我对 Ajax 很陌生，这段代码是由我找到的一些教程制作的。代码主要是按照本教程编写的：https://rudrastyh.com/wordpress/ajax-post-filters.html 我只需要两个 php 操作来执行“表单”更改并更新#response div 上的“tours”，并使用#resultselect id 更新选择输入。
谢谢！
感谢@lewis4you，我能够同时获取 2 个 div 上的数据。但我不明白如何同时执行这两个动作，但与functions.php不同的动作
这个
add_action('wp_ajax_filterduracionajax', 'filterduracionajax'); //
add_action('wp_ajax_nopriv_filterduracionajax', 'filterduracionajax');
必须将数据返回到#resultselect
和
add_action('wp_ajax_filtertoursajax', 'filtertoursajax');
add_action('wp_ajax_nopriv_filtertoursajax', 'filtertoursajax');
必须将数据返回到#response div
我的主要问题是我不知道如何选择要执行的操作
$.ajax(
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
【问题讨论】：
另外一种解决方案是为补充数据设置一个端点，在一次调用中返回两者的数据 【参考方案1】：我没有完全阅读这个问题，但我认为你想要这样的东西：
$('#filtro').change(function()
var filter = $('#filtro');
ajax1(filter);
ajax2(filter);
);
function ajax1(filter)
$.ajax(
url:filter.attr('action'),
data:filter.serialize(), // form data
// ... further code
function ajax2(filter)
$.ajax(
url:filter.attr('action'),
data:filter.serialize(), // form data
// ... further code
通过一次 $.ajax 调用将数据发送到同一个控制器的场景：
$('#filtro').change(function()
var filter = $('#filtro');
ajax1(filter);
);
在控制器中，您必须使用键将数据存储到数组中，以便稍后在 ajax success() 函数中访问它
public function someFunction($dataFromAjax)
// do something with $dataFromAjax
$dataForDivs = [
'div1' => 'some data',
'div2' => 'some data2'
];
return $dataForDivs;
然后在 success:function(data) 中的 $ajax 中，您可以使用
success:function(data)
let div1Data = data.responseJSON.div1;
let div2Data = data.responseJSON.div2;
filter.find('button').text(div1Data); // changing the button label back
$('#response').html(div2Data); // insert data
console.log(div1Data, div2Data);
,
【讨论】：
感谢您的宝贵时间。这又近了一步。使用此代码，我可以同时获取两个 div 的响应数据。但我不知道如何执行这 2 个功能/动作。我认为我的主要问题是我不明白如何为 ajax 调用设置特定操作。在 $.ajax 中，我需要两个动作来执行并返回两个 div 上的数据。 add_action('wp_ajax_filtertoursajax', 'filtertoursajax'); // 返回数据到#response div add_action('wp_ajax_filterduracionajax', 'filterduracionajax'); // 返回数据到#resultselect【参考方案2】：你有没有想过用 JS 的 Fetch API 代替 jQuery 的 Ajax？ Fetch 返回一个 Promise，然后它可以执行一系列 .then() 块，您可以在其中将另一个 fetch() 放入您的 PHP url。
在此处查看示例：
using a fetch inside another fetch in javascript
【讨论】：
以上是关于如何通过一个 ajax 调用执行两个操作 - WordPress的主要内容，如果未能解决你的问题，请参考以下文章
现在通过前台一个按钮用ajax 调用后台的java timer 类 执行一个 定时任务，每10秒执
如何在 JavaScript 中使用 JSONP 请求执行 Ajax 调用？ [复制]
如何在 Ruby on Rails 中完成延迟作业后执行 ajax 回调？