如何在WordPress中同时运行两个AJAX请求?

时间:2019-08-13 作者:Mike Oberdick

在这里使用AJAX并尝试基于用户交互显示帖子。现在,我有它的工作,用户作出类别下拉选择和职位加载相应。我想做的是更进一步,在另一个下拉列表中填充基于所选父类别的子类别。查看网站here.

jQuery

$(\'#ajaxFilter select\').on(\'change\', function(event) {
if(event.preventDefault) { event.preventDefault(); }
$this = $(this);
$value = this.value;
$page = $this.data(\'page\');
$term = $this.data(\'term\');
$qty = $this.closest(\'#ajaxFilter\').data(\'paged\')

    $params = {
        //Bind parameters
        \'value\': $value,
        \'page\' : $page,
        \'term\' : $term,
        \'qty\'  : $qty,
    };

    //Run the query with those parameters
    get_posts($params);
});



function get_posts($params) {
$content   = $(\'#ajaxPosts\');
$.ajax({
    url: psc.ajax_url,
    data: {
        action: \'filter_posts\',
        nonce: psc.nonce,
        params: $params
    },
    type: \'post\',
    dataType: \'json\',
success: function(data, textStatus, XMLHttpRequest) {
    if (data.status === 200) {
        $content.html(data.content);
    }
    else if (data.status === 201) {
        $content.html(data.message);    
    }
    else {
        $status.html(data.message);
    }
    },
error: function(MLHttpRequest, textStatus, errorThrown) {
    $status.html(textStatus);
     }
});
}

functions.php

function psc_filter_posts() {
if( !isset( $_POST[\'nonce\'] ) || !wp_verify_nonce( $_POST[\'nonce\'], \'psc\' ) )
die(\'Permission denied\');

$value = intval($_POST[\'params\'][\'value\']);;
$term = sanitize_text_field($_POST[\'params\'][\'term\']);
$page = intval($_POST[\'params\'][\'page\']);
$qty  = intval($_POST[\'params\'][\'qty\']);

if ( $value == 0 ) : 
    $tax_qry[] = [
        \'taxonomy\' => \'category\',
        \'field\'    => \'term_id\',
        \'terms\'    => $value,
        \'operator\' => \'NOT IN\'
    ];
else :
    $tax_qry[] = [
        \'taxonomy\' => \'category\',
        \'field\'    => \'term_id\',
        \'terms\'    => $value,
    ];
 endif;

//Setup the query args for wp query
$args = [
\'paged\'          => $page,
\'post_status\'    => \'publish\',
\'posts_per_page\' => $qty,
\'tax_query\'      => $tax_qry
];

$qry = new WP_Query($args);

ob_start();
if ($qry->have_posts()) : ?>
    <div class="container">
            <?php while ($qry->have_posts()) : $qry->the_post(); ?>

            LOOP STUFF              

            <?php endwhile; ?>
    </div><!-- .container -->

    <nav class = "container mt-5 text-center">
        <div class="row">
            <div class="col-sm-12">
                <?php psc_ajax_pager($qry,$page,$value); ?>
            </div><!-- .col-sm-12 -->
        </div><!-- .row -->
    </nav>

<?php $response = [
\'status\'=> 200,
\'found\' => $qry->found_posts
];
else :
$response = [
    \'status\'  => 201,
    \'message\' => \'No posts found\'
];

endif;

$response[\'content\'] = ob_get_clean();

die(json_encode($response));

}

add_action(\'wp_ajax_filter_posts\', \'psc_filter_posts\');
add_action(\'wp_ajax_nopriv_filter_posts\', \'psc_filter_posts\');

1 个回复
SO网友:Mike Oberdick

尤里卡!因此,我只在函数中添加了第二个ajax调用。出于某种原因,它返回成功,但没有200个响应。不管怎样,它正在发挥作用。如果有人知道为什么会返回未知响应(200或201除外),请分享。谢谢

function get_posts($params) {
    $.ajax({
        url: psc.ajax_url,
        data: {
            action: \'get_subcats\',
            nonce: psc.nonce,
            params: $params
        },
        type: \'post\',
        dataType: \'json\',
        success: function(data, textStatus, XMLHttpRequest) {
            if (data.status === 200) {
            }
            else if (data.status === 201) {
                alert(\'201\');
                $content.html(data.message);    
            }
            else {
                $(\'#subcategories\').empty();
                $(\'#subcategories\').append(data.content);
            }
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            $status.html(textStatus);
        }
        });

        $.ajax({
        url: psc.ajax_url,
        data: {
            action: \'filter_posts\',
            nonce: psc.nonce,
            params: $params
        },
        type: \'post\',
        dataType: \'json\',
        success: function(data, textStatus, XMLHttpRequest) {
            if (data.status === 200) {
                $(\'#ajaxPosts\').html(data.content);
            }
            else if (data.status === 201) {
                $content.html(data.message);    
            }
            else {
                $status.html(data.message);
            }
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            $status.html(textStatus);
        }
    });
}

functions.php

function psc_subcategories() {
if( !isset( $_POST[\'nonce\'] ) || !wp_verify_nonce( $_POST[\'nonce\'], \'psc\' ) )
die(\'Permission denied\');

$value = intval($_POST[\'params\'][\'value\']);;

ob_start();

$categories=  get_categories(\'child_of=\'.$value.\'&hide_empty=1\');
      foreach ($categories as $cat) {
        $option .= \'<option value="\'.$cat->term_id.\'">\';
        $option .= $cat->cat_name;
        $option .= \' (\'.$cat->category_count.\')\';
        $option .= \'</option>\';
      }
    echo \'<option value="-1" selected="selected">Subcategory</option>\'.$option;

$response[\'content\'] = ob_get_clean();

die(json_encode($response));

}

相关推荐

插件管理页面AJAX-管理调用返回0,URL设置正确。实现了本地化脚本,但没有修复它

我正在尝试提交一个Ajax调用,将所选图像的源URL从WordPress媒体库传输到我的插件设置页面中的PHP。单击“保存”后,我经常会遇到“错误,错误请求”。尝试调用我的AJAX URL时的状态400。我的AJAX URL当前是domain/wp-admin/admin-AJAX。确实存在的php。我曾尝试设置AJAX调用应该期望的多种数据类型,但我遇到了相同的错误。如果在javascript中删除AJAX调用的URL部分,它确实会导致success函数,但success的参数“response”由页面