WordPress调用admin-ajax.php实现日期筛选报400 Bad Request

WordPress站点开发中实现自定义表数据按日期范围筛选功能，前端使用jQuery Datepicker选择日期，点击按钮通过AJAX提交到admin-ajax.php拉取筛选结果，相关代码如下：
日期交互JS代码：

<script>  
  $(document).ready(function(){  
     var ajaxscript = 'http://localhost/wp-admin/admin-ajax.php'; // 测试用绝对路径
       $.datepicker.setDefaults({  
            dateFormat: 'yy-mm-dd'   
       });  
       $(function(){  
            $("#from_date").datepicker();  
            $("#to_date").datepicker();  
       });  
       $('#filter').click(function(){  
            var from_date = $('#from_date').val();  
            var to_date = $('#to_date').val();  
            if(from_date != '' && to_date != '')  
            {  
                 $.ajax({  
                      method: "POST",
                      url: ajaxscript,
                        dataType: 'json', 
                      data:{from_date:from_date, to_date:to_date},  
                      success:function(data)  
                      {  
                           $('#order_table').html(data);  
                      }  
                 });  
            }  
            else  
            {  
                 alert("Please Select Date");  
            }  
       });  
  });  
</script>

日期选择控件代码：

<div class="col-md-3">  
    <input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />  
</div>  
<div class="col-md-3">  
    <input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />  
</div>  
<div class="col-md-5">  
    <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />  
</div>

测试时请求持续返回 POST http://localhost/wp-admin/admin-ajax.php 400 (Bad Request) 错误，无法获取筛选结果。

核心触发点是请求缺少必填的action参数：WordPress的admin-ajax.php接口强制要求所有请求携带action参数，用来匹配后端通过wp_ajax_*/wp_ajax_nopriv_*钩子注册的处理函数，缺少该参数时WordPress会直接返回400状态码。
代码另外存在两个潜在问题：

• 硬编码admin-ajax.php地址，站点更换域名、部署到子目录时会直接出现请求地址错误
• AJAX配置中声明dataType: 'json'，但回调中直接将响应当成HTML插入DOM，返回格式不匹配时会触发前端解析错误

1. 调整前端AJAX代码 #

• 移除硬编码的接口地址，使用WordPress提供的admin_url()函数动态输出AJAX接口地址
• 请求参数中补充action字段，值与后续后端注册的钩子后缀保持一致
• 修正dataType配置与实际返回格式匹配，增加错误回调方便调试
  修正后的JS代码：

<script>  
$(document).ready(function(){  
    var ajaxscript = '<?php echo admin_url('admin-ajax.php'); ?>';
    $.datepicker.setDefaults({  
        dateFormat: 'yy-mm-dd'   
    });  
    $("#from_date").datepicker();  
    $("#to_date").datepicker();  

    $('#filter').click(function(){  
        var from_date = $('#from_date').val();  
        var to_date = $('#to_date').val();  
        if(from_date != '' && to_date != '')  
        {  
            $.ajax({  
                method: "POST",
                url: ajaxscript,
                dataType: 'html',
                data:{
                    action: 'filter_date_range',
                    from_date: from_date, 
                    to_date: to_date
                },  
                success:function(data)  
                {  
                    $('#order_table').html(data);  
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });  
        }  
        else  
        {  
            alert("请选择起止日期");  
        }  
    });  
});  
</script>

2. 注册后端AJAX处理逻辑 #

在主题functions.php或自定义插件文件中，添加对应action的处理钩子，注意根据业务需求判断是否需要开放给未登录用户访问：

// 登录用户可调用该接口
add_action('wp_ajax_filter_date_range', 'date_range_filter_handler');
// 如需开放给未登录用户，放开下一行注释
// add_action('wp_ajax_nopriv_filter_date_range', 'date_range_filter_handler');

function date_range_filter_handler(){
    // 校验并格式化传入的日期参数
    $from_date = sanitize_text_field($_POST['from_date']);
    $to_date = sanitize_text_field($_POST['to_date']);

    global $wpdb;
    // 此处编写自定义表查询逻辑，按传入的日期范围拉取数据
    // 循环拼接为表格行HTML后直接输出

    die(); // AJAX回调末尾必须执行die/exit，避免多余输出导致格式异常
}

内容的提问来源于stack exchange，提问作者Kreawich C