在WordPress中使用AJAX处理SQL请求的技术求助

我明白你卡在WordPress AJAX操作数据库的流程上了——很多新手都会在这里踩坑，尤其是没搞清楚WordPress的AJAX机制和安全规范。下面给你一个完全可运行的极简示例，涵盖从后端注册接口到前端发起请求的全流程，你可以直接复制测试，之后再基于它拓展功能。

一、后端处理（主题的functions.php） #

首先在你的主题functions.php中添加以下代码，这部分负责注册AJAX接口、验证请求合法性、执行数据库读写操作并返回结果：

// 注册AJAX动作（登录用户可访问）
add_action('wp_ajax_my_db_operation', 'my_db_operation_handler');
// 注册AJAX动作（未登录用户可访问，若不需要可删除此行）
add_action('wp_ajax_nopriv_my_db_operation', 'my_db_operation_handler');

function my_db_operation_handler() {
    // 1. 验证安全nonce（必须步骤，防止CSRF攻击）
    check_ajax_referer('my_db_nonce', 'nonce');

    global $wpdb;
    $table_name = $wpdb->prefix . 'your_table_name'; // 替换成你的数据表名，记得加前缀

    // 2. 根据请求类型执行读写操作
    $action = isset($_POST['action_type']) ? sanitize_text_field($_POST['action_type']) : '';
    $response = array('status' => 'error', 'message' => '无效操作');

    switch ($action) {
        // 示例：读取数据
        case 'read':
            $results = $wpdb->get_results("SELECT * FROM $table_name LIMIT 5");
            if ($results) {
                $response = array(
                    'status' => 'success',
                    'data' => $results
                );
            } else {
                $response['message'] = '未找到数据';
            }
            break;

        // 示例：写入数据
        case 'write':
            $data = array(
                'column1' => sanitize_text_field($_POST['column1']),
                'column2' => sanitize_text_field($_POST['column2'])
            );
            $inserted = $wpdb->insert($table_name, $data);
            if ($inserted) {
                $response = array(
                    'status' => 'success',
                    'message' => '数据写入成功',
                    'insert_id' => $wpdb->insert_id
                );
            } else {
                $response['message'] = '写入失败：' . $wpdb->last_error;
            }
            break;
    }

    // 3. 返回JSON响应并终止程序
    wp_send_json($response);
    wp_die(); // 必须调用，结束AJAX请求
}

// 注册前端脚本，传递必要的全局变量（比如AJAX URL和nonce）
add_action('wp_enqueue_scripts', 'my_enqueue_ajax_scripts');
function my_enqueue_ajax_scripts() {
    wp_enqueue_script('my-ajax-script', get_template_directory_uri() . '/js/my-ajax.js', array('jquery'), '1.0', true);
    
    // 传递全局变量到前端JS
    wp_localize_script('my-ajax-script', 'MyAjax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my_db_nonce')
    ));
}

二、前端调用（创建主题下的js/my-ajax.js） #

在主题目录下新建js文件夹，创建my-ajax.js文件，添加以下代码发起AJAX请求：

jQuery(document).ready(function($) {
    // 示例：触发读取数据的按钮点击事件
    $('#btn-read-data').on('click', function() {
        $.ajax({
            url: MyAjax.ajax_url,
            type: 'POST',
            data: {
                action: 'my_db_operation', // 对应后端注册的动作名
                nonce: MyAjax.nonce, // 传递安全验证nonce
                action_type: 'read' // 指定要执行的操作类型
            },
            success: function(response) {
                if (response.status === 'success') {
                    console.log('读取到的数据：', response.data);
                    // 这里可以把数据渲染到页面上，比如：
                    // $('#data-container').html(JSON.stringify(response.data));
                } else {
                    alert('读取失败：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求出错：', error);
            }
        });
    });

    // 示例：触发写入数据的按钮点击事件
    $('#btn-write-data').on('click', function() {
        $.ajax({
            url: MyAjax.ajax_url,
            type: 'POST',
            data: {
                action: 'my_db_operation',
                nonce: MyAjax.nonce,
                action_type: 'write',
                column1: '测试内容1', // 替换成你要写入的实际数据
                column2: '测试内容2'
            },
            success: function(response) {
                if (response.status === 'success') {
                    alert('写入成功！插入ID：' + response.insert_id);
                } else {
                    alert('写入失败：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求出错：', error);
            }
        });
    });
});

三、页面测试（添加按钮到任意页面/模板） #

在你的WordPress页面或模板中添加测试按钮，触发AJAX请求：

<button id="btn-read-data">读取数据库数据</button>
<button id="btn-write-data">写入测试数据</button>
<div id="data-container"></div>

关键注意事项 #

• 安全验证：check_ajax_referer和wp_create_nonce是必须的，防止恶意请求。
• 数据库操作：始终使用WordPress的$wpdb类，不要直接用原生mysqli或mysql函数，它会自动处理表前缀和安全转义。
• 权限控制：如果只允许登录用户访问，可以删除wp_ajax_nopriv_开头的add_action。
• 数据 sanitize：用sanitize_text_field等函数处理用户输入，防止SQL注入和XSS攻击。
• 脚本加载：必须用wp_enqueue_script和wp_localize_script传递AJAX URL和nonce，不要硬编码URL。

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