WordPress插件AJAX提交插入数据库遇500错误求助

问题背景 #

我正在学习PHP和JS，开发一款WordPress插件，需求是：点击带有item-preview类的链接时，读取对应item元素的data-id，通过AJAX POST请求将数据发送至PHP文件，最终在WordPress数据库的add_items表中插入一行数据。目前除PHP插入数据库的功能外，其他部分均正常，但控制台显示POST请求返回500错误。

原插件代码 #

<?php
/*
plugin name: test
description: local
author uri: local
*/
function set_items_list(){
}
?>

<div class="item" data-id="1">
<a href="#" class="item-preview">TEST</a>
</div>
<div class="item" data-id="2">
<a href="#" class="item-preview">TEST</a>
</div>
<div class="item" data-id="3">
<a href="#" class="item-preview">TEST</a>
</div>

<script>
     var itemnodes = document.getElementsByClassName('item-preview');
     var item = document.getElementsByClassName("item");
     
        for (var i = 0, size = itemnodes.length; i < size; i++) {
            itemnodes[i].addEventListener('click', function(i) {
            var id = item[i].getAttribute('data-id');
            console.log(id);
            var xhttp = new XMLHttpRequest();
            xhttp.open("POST", "files/test.php", true); 
            xhttp.setRequestHeader("Content-Type", "application/json");
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

            var response = this.responseText;
            console.log(response);
             }
        };
        
        var data = {id:id};
        xhttp.send(JSON.stringify(data));

         }.bind(null, i));
    }
    </script>
<?php

add_shortcode('list','set_items_list');

原处理请求的PHP代码（files/test.php） #

<?php
$contents = file_get_contents('php://input');
$jsondata = json_decode($contents, true);
    global $wpdb;


$wpdb->insert('add_items',array('FirstName'=> 'test1','SecondName'=> 'test2'));

echo $jsondata['id'];

exit;
?>

错误原因分析 #

1. 未加载WordPress核心环境：单独的test.php文件没有引入WordPress初始化文件，导致$wpdb全局变量未定义，直接调用触发致命错误，返回500状态码。
2. 表名前缀缺失：WordPress数据库表默认带有前缀（如wp_），直接使用add_items会找不到对应表。
3. 数据验证缺失：未判断json_decode是否成功，若前端数据格式错误，$jsondata为null，直接访问$jsondata['id']会报错。
4. 路径不规范：AJAX请求的files/test.php路径未使用WordPress提供的路径函数，易出现文件找不到的问题。

修正方案（推荐使用WordPress标准AJAX机制） #

1. 重构插件主文件 #

<?php
/*
plugin name: test
description: local
author uri: local
*/

// 短代码输出内容
function set_items_list() {
    ob_start();
    ?>
    <div class="item" data-id="1">
        <a href="#" class="item-preview">TEST</a>
    </div>
    <div class="item" data-id="2">
        <a href="#" class="item-preview">TEST</a>
    </div>
    <div class="item" data-id="3">
        <a href="#" class="item-preview">TEST</a>
    </div>
    <?php
    return ob_get_clean();
}

// 注册并加载前端脚本
function enqueue_item_script() {
    wp_enqueue_script(
        'item-preview-script',
        plugin_dir_url(__FILE__) . 'js/item-preview.js',
        array('jquery'),
        '1.0',
        true
    );
    // 传递AJAX必要参数
    wp_localize_script('item-preview-script', 'ajax_data', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('item-preview-nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_item_script');

// 处理AJAX请求（支持登录/未登录用户）
function handle_item_insert() {
    // 验证请求合法性
    if (!wp_verify_nonce($_POST['nonce'], 'item-preview-nonce')) {
        wp_send_json_error('非法请求');
    }

    // 验证并处理ID
    $item_id = isset($_POST['item_id']) ? intval($_POST['item_id']) : 0;
    if (!$item_id) {
        wp_send_json_error('无效的ID');
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'add_items'; // 自动添加表前缀

    // 插入数据
    $insert_result = $wpdb->insert(
        $table_name,
        array(
            'FirstName' => 'test1',
            'SecondName' => 'test2',
            'item_id' => $item_id // 可根据表结构调整字段
        ),
        array('%s', '%s', '%d') // 字段类型匹配
    );

    if ($insert_result) {
        wp_send_json_success(array('item_id' => $item_id));
    } else {
        wp_send_json_error('数据插入失败');
    }
}
add_action('wp_ajax_handle_item_insert', 'handle_item_insert');
add_action('wp_ajax_nopriv_handle_item_insert', 'handle_item_insert');

add_shortcode('list','set_items_list');
?>

2. 创建前端JS文件（js/item-preview.js） #

jQuery(document).ready(function($) {
    $('.item-preview').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        var item_id = $(this).closest('.item').data('id'); // 更便捷的获取方式
        console.log(item_id);

        $.ajax({
            url: ajax_data.ajax_url,
            type: 'POST',
            data: {
                action: 'handle_item_insert',
                nonce: ajax_data.nonce,
                item_id: item_id
            },
            success: function(res) {
                if (res.success) {
                    console.log('插入成功，ID：' + res.data.item_id);
                } else {
                    console.log('错误：' + res.data);
                }
            },
            error: function(xhr, status, err) {
                console.log('AJAX错误：' + err);
            }
        });
    });
});

关键注意事项 #

• 永远使用WordPress内置的AJAX机制（admin-ajax.php），避免直接调用独立PHP文件，确保核心环境加载。
• 用wp_localize_script传递敏感参数（如AJAX地址、nonce），保障请求安全。
• 所有用户输入数据必须验证、过滤，避免SQL注入和报错。
• 数据库表名必须拼接$wpdb->prefix，适配不同WordPress站点的表前缀设置。

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