WordPress插件管理端删除数据Ajax返回400 bad request问题求解

问题原因&修复方案 #

1. 按钮代码错误 #

你给按钮重复定义了class属性，修正后：

<button class="deletebutton" <?php echo 'value="' . esc_attr($data->id) . '"'; ?>>删除</button>

2. jQuery/Ajax代码错误 #

这是触发400错误的核心原因：

• action参数不能直接放在$.ajax的配置项根层级，必须放到data参数内
• data必须传键值对格式，不能直接传数值
• dataType取值错误，没有data这个合法值，不需要可以直接删除
• 语法缺失逗号
  修正后代码：

<script>
var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
jQuery(document).ready(function() {
    jQuery(".deletebutton").click(function(){
        var element_id = jQuery(this).val();
        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'delete_data',
                element_id: element_id
            }
        });
    });
});
</script>

3. PHP处理函数错误 #

WordPress的wp_ajax_{action}钩子的回调函数不支持直接传参，参数需要从POST请求中读取，同时必须在逻辑结束后调用wp_die()，否则也会触发异常：

add_action('wp_ajax_delete_data', 'delete_data');
function delete_data(){
    global $wpdb;
    // 从POST请求中读取ID并转成整数避免SQL注入
    $element_id = intval($_POST['element_id']);
    $tablename = $wpdb->prefix . 'my_table';
    $wpdb->delete($tablename, array('id' => $element_id));
    // 必须加wp_die()终止请求
    wp_die();
}

可选安全加固 #

建议添加nonce校验防止CSRF攻击：

1. 按钮新增nonce属性

<button class="deletebutton" data-nonce="<?php echo wp_create_nonce('delete_data_nonce'); ?>" value="<?php echo esc_attr($data->id); ?>">删除</button>

2. Ajax请求携带nonce参数

data: {
    action: 'delete_data',
    element_id: element_id,
    nonce: jQuery(this).data('nonce')
}

3. PHP侧校验nonce

function delete_data(){
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'delete_data_nonce')) {
        wp_send_json_error('非法请求');
    }
    global $wpdb;
    $element_id = intval($_POST['element_id']);
    $tablename = $wpdb->prefix . 'my_table';
    $wpdb->delete($tablename, array('id' => $element_id));
    wp_send_json_success('删除成功');
    wp_die();
}

内容的提问来源于stack exchange，提问作者Jędrzej