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

我在他的项目中寻找了很多方向，甚至认为我找到了类似的案例，但我找不到足够有用的东西来帮助我理解这个问题。 我开始使用wp_查询的自定义过滤器，一个用于特定的自定义字段，另一个用于特定分类法的类别

在我的前端，我有一个包含两个下拉列表的容器，有点像

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

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

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

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

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

---

谢谢大家!

如果您真的想使用一个AJAX函数，可以将AJAX调用放在它自己的函数中，并在on change事件中调用它，传递任何必需的参数，从而简化事情

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

    } );

});

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

使用$\u GET或$\u POST$_这个请求让坏人更容易接受

查看Wordpress。我在这里的代码中使用了它。也

最重要的是，你的数据

---

还有一些问题需要解决，但希望能有所帮助。

Chris——您的回答非常好，我已经能够理解如何将AJAX放在一个函数中。（这更好吗？或者有两个功能是可以接受的？）-谢谢你的建议！！！我不认为这真的是一个更好的问题，但很多人会说是的（）

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

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)

}