Question

我在他的项目中搜索了很多方向，甚至认为我发现了类似的情况，我找不到有用的东西来帮助我理解这个问题。我开始使用wp_Query的自定义过滤器，一个用于特定的自定义字段，另一个用于特定分类的类别。

在我的前端，我有一个有两个下拉的容器，有点像......

<div id="filters">
    <select id="clients">
        <option></option>
        ...
    </select>

    <select id="cats">
        <option></option>
        ...
    </select>
</div>

它们没有链接（“级联”）。两者都是完全独立的，理想情况下，当选择另一个时，相互重置为默认选择（无）。它们只是作为“客户”和“工作类别”的过滤器。使用jQuery + AJAX，我在下拉列表中获取所选项目的数据并将其发送到我的函数文件（使用$ _REQUEST ['clients']或$ _REQUEST ['cats']）他们进入我的函数并编辑wp_Query arg。因此将结果发送到我页面中的DIV。这是一个小片段（仅适用于“客户”，但对于其他过滤器没有太大区别）：

if( !empty($_REQUEST['client']) && $_REQUEST['index'] != '0' ) {
    $clients = new WP_Query( array(
    'post_type' => 'work',
    'post_status' => 'publish',
    'posts_per_page' => '-1',
    'meta_query' => array(
        array(
            'key' => 'client_name',
            'value' => $_REQUEST['client'],
            ),
        ),
    ));
    callD( $clients );
}

这是我的ajax.js文件，它处理下拉列表中事件的监听/处理（在两个下拉列表中）：

//select the container with the two dropdowns
jQuery('#client-select').bind('change', function(event) {
    $.ajax({
        type: "POST",
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'example_ajax_request',
            'client': $('option:selected', this).attr('value'),
            'index': $('option:selected', this).index(),
        },
        success: function(__data) {
            if (__data === '') return; // or leave default empty message
            $('#all-work-thumbs-container').html(__data).fadeIn('slow');
        },
        error: function(errorThrown) {
            console.log(errorThrown);
        },
    });
});
jQuery('#cat-select').bind('change', function(event) {
    //AJAX request
    $.ajax({
        type: "POST",
        url: '/wp-admin/admin-ajax.php',
        data: {
            'action': 'example_ajax_request',
            'index': $('option:selected', this).index(),
            'cat': $('option:selected', this).attr('value'),
        },
        success: function(__data) {
            if (__data === '') return; // or leave default empty message
            console.log($('option:selected', this).attr(
                'value'));
            $('#all-work-thumbs-container').html(__data).fadeIn('slow');
        },
        error: function(errorThrown) {
            console.log(errorThrown);
        },
    });
});

我对此非常陌生，但我想知道简化我的ajax.js文件的最佳方法，现在它包含两个jQuery函数。我怎样才能将它浓缩成一个ajax请求呢？当选择另一个下拉列表时，如何处理重置其中一个下拉列表的逻辑？

如果这个问题太简单，我很抱歉，也许我只是不完全理解在这种情况下如何处理它。

谢谢！

Answer 1

如果你真的想使用一个AJAX函数，你可以通过将AJAX调用放在它自己的函数中并在on change事件中调用它来简化事情，传递任何必需的args。

var sendRequest = function( data, callback ) {
    jQuery.ajax({
        url: '<?php echo admin_url("admin-ajax.php"); ?>',
        type: 'POST',
        data: data,
        success: function( response ) {

            if( callback != undefined )
                callback( response );   //pass the response to your callback function

        }
    });
}

jQuery('select').bind('change', function(evt) {

    //build data
    var data = {};

    //send the request
    sendRequest( data, function( response ) {
        //do something with the response, like reset the select boxes

    } );

});

在重置选择框方面，您可以将其移动到一个功能

var resetSelect = function( select ) {

    jQuery(select).find('option:first').attr('selected', true)

}

您需要将正确的select元素传递给函数。其他一些建议：

使用$ _GET或$ _POST。 $ _REQUEST让坏人变得更容易。
查看admin_url('admin_ajax.php')以获取Wordpress。我在我的代码中使用它。另外，Wordpress AJAX。
最重要的是，sanitize and validate您的数据。

还有一些让你弄清楚，但希望有所帮助。

带有单个Ajax请求的Wordpress PHP下拉过滤器（2x）

1 个答案: