使用AJAX+PHP+MySQL及wpdb->insert插入数据失败求助

核心问题 #

1. AJAX数据格式错误：你用ajax.send(data)发送JS对象时，原生XMLHttpRequest会把对象转为[object Object]字符串发送，PHP无法解析到$_POST数组中，导致插入数据为空。
2. 直接调用insert.php不符合WordPress规范：直接包含wp-config.php可能导致WordPress全局环境未完全初始化，同时存在安全风险。

方案一：快速修复现有代码 #

修改JavaScript代码 #

需要将数据转为URL编码格式，并设置正确的请求头：

document.querySelector('#ajax-send-button').addEventListener('click', function () {
    var ajax = new XMLHttpRequest();
    var method = 'POST';
    var url = 'insert.php';
    // 将对象转为URL编码的键值对字符串
    const name = encodeURIComponent(document.querySelector('#form-field-ajax_send_name').value);
    const details = encodeURIComponent(document.querySelector('#form-field-ajax_send_detail').value);
    var data = `name=${name}&details=${details}`;
    var asynchronous = true;

    ajax.open(method, url, asynchronous);
    // 设置表单编码的请求头
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    ajax.send(data);

    ajax.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            alert('Done!');
        } else if (this.status !== 200) {
            alert('Fehler!')
        }
    }
    ajax.onerror = function () {
        alert("Request failed");
    };
})

修改PHP代码（增加错误检查） #

<?php
// 确保wp-config.php路径正确，建议用绝对路径
include_once ABSPATH . "wp-config.php";
global $wpdb;

// 检查POST数据是否存在
if (isset($_POST["name"]) && isset($_POST["details"])) {
    $p_name = $_POST["name"];
    $p_details = $_POST["details"];
    
    $insertedData = array(
        'name' => $p_name,
        'details' => $p_details,
    );
    
    // 执行插入并检查结果
    if ($wpdb->insert('mytable', $insertedData)) {
        echo "插入成功";
    } else {
        // 输出错误信息便于调试
        echo $wpdb->last_error;
        http_response_code(500);
    }
} else {
    echo "缺少必要参数";
    http_response_code(400);
}
?>

方案二：WordPress标准AJAX实现（推荐） #

WordPress内置了安全的AJAX处理机制，无需单独写insert.php，步骤如下：

1. 在主题functions.php中注册AJAX动作 #

// 登录用户和未登录用户都能访问的AJAX动作
add_action('wp_ajax_nopriv_custom_insert_action', 'custom_insert_data');
add_action('wp_ajax_custom_insert_action', 'custom_insert_data');

function custom_insert_data() {
    global $wpdb;
    
    // 检查nonce安全验证（必须加，防止恶意请求）
    check_ajax_referer('custom_insert_nonce', 'security');
    
    // 检查POST参数
    if (!isset($_POST['name']) || !isset($_POST['details'])) {
        wp_send_json_error('缺少必要参数');
    }
    
    $p_name = sanitize_text_field($_POST['name']);
    $p_details = sanitize_textarea_field($_POST['details']);
    
    $inserted = $wpdb->insert('mytable', array(
        'name' => $p_name,
        'details' => $p_details,
    ));
    
    if ($inserted) {
        wp_send_json_success('插入成功');
    } else {
        wp_send_json_error('插入失败：' . $wpdb->last_error);
    }
    
    // 必须终止脚本
    wp_die();
}

2. 前端JavaScript代码（使用WordPress内置的AJAX URL和nonce） #

document.querySelector('#ajax-send-button').addEventListener('click', function () {
    const name = document.querySelector('#form-field-ajax_send_name').value;
    const details = document.querySelector('#form-field-ajax_send_detail').value;
    
    // 使用WordPress本地化的脚本变量（推荐方式）
    const ajaxUrl = ajax_obj.ajax_url;
    const nonce = ajax_obj.nonce;
    
    const formData = new FormData();
    formData.append('action', 'custom_insert_action');
    formData.append('security', nonce);
    formData.append('name', name);
    formData.append('details', details);
    
    fetch(ajaxUrl, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Done!');
        } else {
            alert('Fehler! ' + data.data);
        }
    })
    .catch(error => {
        alert('Request failed');
    });
})

3. 本地化脚本（传递AJAX参数到前端） #

在主题functions.php中添加，将AJAX URL和nonce安全传递到前端：

function enqueue_custom_scripts() {
    wp_enqueue_script('custom-ajax-script', get_template_directory_uri() . '/js/custom-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('custom-ajax-script', 'ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom_insert_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

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