WordPress插件中使用AJAX删除表格条目点击无响应问题求解

核心错误点 #

• PHP侧变量名书写错误：你在fws_delete_row函数中定义存储表名的变量是$dbtable，但调用$wpdb->delete()时传入的表名参数是未定义的$table，导致删除操作找不到目标表，自然无法生效。
• 缺少WordPress AJAX要求的终止逻辑：AJAX请求处理完成后必须调用wp_die()结束执行，否则会返回多余冗余内容，也可能导致逻辑异常。
• 缺少必要的权限和参数校验：既可能出现未授权用户随意删除数据的安全问题，也可能因为传入的ID不合法导致数据库操作报错。

修正后的代码示例 #

后端PHP代码 #

function fws_delete_row(){
    // 权限校验：仅后台有管理权限的用户可操作
    if (!current_user_can('manage_options')) {
        wp_send_json_error('权限不足');
    }
    // 参数合法性校验
    if (!isset($_POST['id']) || !is_numeric($_POST['id'])) {
        wp_send_json_error('参数无效');
    }
    global $wpdb;
    $dbtable = $wpdb->prefix . 'fws_fixtures';
    $id = intval($_POST['id']);
    // 修正表名变量
    $delete_result = $wpdb->delete($dbtable, array('id' => $id));    
    if ($delete_result) {
        wp_send_json_success('删除成功');
    } else {
        wp_send_json_error('删除失败，请检查条目ID是否存在');
    }
    // 必须加这行终止执行，是WordPress AJAX接口的要求
    wp_die();
}
add_action( 'wp_ajax_fws_delete_row', 'fws_delete_row' );
// 后台操作不需要给未登录用户开放权限，下面这行可以直接删除，仅在你需要允许未登录用户删除数据时保留
// add_action( 'wp_ajax_nopriv_fws_delete_row', 'fws_delete_row' );

前端JS代码（附加调试+淡出效果） #

jQuery(document).on('click', '.submitDeleteEntry', function () {
    var id = this.id;
    // 获取当前条目所在的行元素，后续做淡出删除用
    var $currentRow = jQuery(this).closest('tr');
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "fws_delete_row", "id": id},
        success: function (response) {
            // 打开浏览器控制台可以看到请求返回结果，方便排查问题
            console.log(response);
            if (response.success) {
                // 条目淡出删除效果
                $currentRow.fadeOut(300, function(){
                    jQuery(this).remove();
                });
            } else {
                alert('操作失败：' + response.data);
            }
        },
        error: function (xhr, status, error) {
            // 请求异常时会在控制台打印错误信息
            console.log(error);
        }
    });
 });

排查小技巧 #

打开浏览器开发者工具的「网络」面板，点击删除按钮后查看对应的AJAX请求，确认请求参数是否正确、返回状态码和返回内容是否正常，就能快速定位是前端传参问题还是后端逻辑问题。

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