通过Ajax/JSON方式删除WordPress自定义数据库记录

阿华AIGC实验室

2026-5-15

解决WordPress中Ajax删除自定义表记录的问题

我完全懂你现在的 frustration——折腾了Ajax相关的代码却没效果，还要给这个用户专属的心率表格加删除按钮对吧？别慌，咱们一步一步来搞定，从修改表格、写前端Ajax到后端处理，全给你捋清楚，还顺便补上你现有代码里的安全漏洞。

1. 修改表格代码，添加删除按钮

先把你原来的表格代码改成这样，每条记录后面加一个删除按钮，同时带上记录ID和安全验证的nonce（防止恶意请求）：

<table border="1">
    <tr>
        <th>Syke</th>
        <th>Kesto</th>
        <th>操作</th>
    </tr>
    <?php
    $current_user = wp_get_current_user();
    $username = $current_user->user_login;
    global $wpdb;
    // 用prepare防止SQL注入，这步很重要！
    $result = $wpdb->get_results(
        $wpdb->prepare("SELECT * FROM syke where username = %s", $username)
    );
    foreach ($result as $print) {
        // 生成专属的删除验证nonce
        $delete_nonce = wp_create_nonce('delete_syke_record_' . $print->id);
        echo '<tr data-record-id="' . esc_attr($print->id) . '">';
        echo '<td>' . esc_html($print->rate) . '</td>';
        echo '<td>' . esc_html($print->kesto) . '</td>';
        echo '<td><button class="delete-syke-btn" data-id="' . esc_attr($print->id) . '" data-nonce="' . esc_attr($delete_nonce) . '">删除</button></td>';
        echo '</tr>';
    }
    ?>
</table>

这里做了几个关键优化：

替换了直接拼接SQL的写法，用$wpdb->prepare()避免SQL注入风险
给每行表格加了data-record-id属性，方便删除成功后直接移除对应行
给删除按钮绑定了记录ID和专属nonce，确保请求的合法性

2. 编写前端Ajax处理的JavaScript

在你的主题自定义JS文件里（或者通过wp_enqueue_script添加的JS文件）加入这段代码：

document.addEventListener('DOMContentLoaded', function() {
    // 给所有删除按钮绑定点击事件
    const deleteButtons = document.querySelectorAll('.delete-syke-btn');
    deleteButtons.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const recordId = this.dataset.id;
            const nonce = this.dataset.nonce;
            
            // 弹出确认框，防止误删
            if (!confirm('确定要删除这条记录吗？')) {
                return;
            }
            
            // 发送Ajax请求到WordPress的处理接口
            fetch(sykeAjax.ajaxurl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    action: 'delete_syke_record', // 对应后端的动作名
                    record_id: recordId,
                    _wpnonce: nonce
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 删除成功后移除表格行
                    document.querySelector(`tr[data-record-id="${recordId}"]`).remove();
                    alert('记录已删除');
                } else {
                    alert('删除失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('请求出错:', error);
                alert('删除请求失败，请稍后重试');
            });
        });
    });
});

注意：如果你的JS是在前端页面加载，需要先把WordPress的Ajax地址传给JS，在主题的functions.php里加这段代码：

// 注册并传递Ajax地址
function enqueue_syke_scripts() {
    wp_enqueue_script('syke-custom-js', get_template_directory_uri() . '/js/syke-custom.js', array(), '1.0', true);
    wp_localize_script('syke-custom-js', 'sykeAjax', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_syke_scripts');

记得把/js/syke-custom.js换成你实际的JS文件路径。

3. 编写后端Ajax处理函数

在主题的functions.php里添加这段代码，用来处理删除请求：

// 处理登录用户的删除请求
function delete_syke_record() {
    // 验证请求合法性
    $record_id = isset($_POST['record_id']) ? intval($_POST['record_id']) : 0;
    $nonce = isset($_POST['_wpnonce']) ? sanitize_text_field($_POST['_wpnonce']) : '';
    
    // 验证nonce
    if (!wp_verify_nonce($nonce, 'delete_syke_record_' . $record_id)) {
        wp_send_json_error(array('message' => '安全验证失败'));
    }
    
    // 检查用户是否登录
    if (!is_user_logged_in()) {
        wp_send_json_error(array('message' => '请先登录'));
    }
    
    global $wpdb;
    $current_user = wp_get_current_user();
    $table_name = 'syke'; // 替换成你实际的表名，如果是带前缀的比如wp_syke，就写$wpdb->prefix . 'syke'
    
    // 确保用户只能删除自己的记录
    $deleted = $wpdb->delete(
        $table_name,
        array(
            'id' => $record_id,
            'username' => $current_user->user_login
        ),
        array(
            '%d', // id是数字类型
            '%s'  // username是字符串类型
        )
    );
    
    if ($deleted) {
        wp_send_json_success(array('message' => '删除成功'));
    } else {
        wp_send_json_error(array('message' => '未找到该记录或无权限删除'));
    }
}
// 注册Ajax动作，仅登录用户可访问
add_action('wp_ajax_delete_syke_record', 'delete_syke_record');

这里做了多层安全校验：