Question

我的页面上有一个“旅行”部分。

游览具有2个过滤器（选择输入）。 “目标”和“任务”（位置和持续时间）

到目前为止，我使用ajax进行了过滤器的工作，并在选择“目标”后使用新的游览更新了“ #result” ID。

但是我也想用新选项（基于选定的destino）更新“ duracion”选择。

问题是，我不知道如何执行两个动作并在两个不同的地方做出响应。

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">&nbsp;</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">&nbsp;</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">&nbsp;</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上的“游览”，还需要使用#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

Answer 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);
},

Answer 2

您是否考虑过使用JS的Fetch API代替jQuery的Ajax？ Fetch返回一个Promise，然后可以执行.then（）块链，您可以在其中将另一个fetch（）放入您的PHP网址。

在此处查看示例：

using a fetch inside another fetch in javascript

如何通过一个Ajax调用执行两项操作-WordPress

2 个答案: