WordPress中AJAX传递Piotnet表单数据失败问题求助

问题核心 #

你当前的代码存在两个致命问题：

1. PHP短代码里定义了匿名函数但从未调用，导致POST数据处理逻辑根本没执行
2. 直接向WordPress页面发起POST请求，WordPress默认的页面加载流程会干扰数据接收，短代码的执行时机无法保证能正确捕获请求
   另外JS里的JSON.parse(JSON.stringify(newsRev))属于冗余操作，直接使用原对象即可。

标准解决方案（基于WordPress官方AJAX机制） #

推荐使用WordPress内置的admin-ajax.php接口处理AJAX请求，这是WordPress规范的AJAX处理方式，能避免页面加载流程的干扰。

1. 修改JS代码 #

$('BUTTON').on("click", function(){
    var newsRev = {  
        ndatego: sReservation.dateGo, 
        ndateback: sReservation.dateBack,
        action: 'save_reservation_data' // 必须参数，指定WordPress要执行的回调函数
    };                      

    jQuery.ajax({
        type:'POST',
        url: '/wp-admin/admin-ajax.php', // WordPress标准AJAX接口
        data: newsRev,                           
        success: function(data) {
            console.log('提交成功:', data);
        },
        error: function(errorThrown){
            console.log('提交失败:', errorThrown);                
        }
    })
})

2. 修改PHP代码（添加到主题functions.php或代码片段插件） #

// 处理登录用户的AJAX请求，若允许未登录用户提交，需添加wp_ajax_nopriv_前缀的钩子
add_action('wp_ajax_save_reservation_data', 'handle_reservation_submission');

function handle_reservation_submission() {
    // 验证请求方法
    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
        wp_send_json_error('无效请求方法');
    }

    // 安全获取并过滤POST数据
    $ndatego = isset($_POST['ndatego']) ? sanitize_text_field($_POST['ndatego']) : '';
    $ndateback = isset($_POST['ndateback']) ? sanitize_text_field($_POST['ndateback']) : '';

    if (empty($ndatego) || empty($ndateback)) {
        wp_send_json_error('缺少必要参数');
    }

    // 1. 保存数据到数据库（示例使用自定义表，可根据需求调整）
    global $wpdb;
    $table_name = $wpdb->prefix . 'reservations'; // 表名自动适配你的WordPress前缀

    // 首次执行时创建表（后续可删除此段）
    $wpdb->query("CREATE TABLE IF NOT EXISTS $table_name (
        id INT AUTO_INCREMENT PRIMARY KEY,
        date_go DATE NOT NULL,
        date_back DATE NOT NULL,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )");

    // 插入数据
    $wpdb->insert(
        $table_name,
        array(
            'date_go' => $ndatego,
            'date_back' => $ndateback
        ),
        array('%s', '%s')
    );

    // 2. 返回成功响应
    wp_send_json_success(array(
        'message' => '数据保存成功',
        'data' => array(
            'ndatego' => $ndatego,
            'ndateback' => $ndateback
        )
    ));

    // 必须终止WordPress后续执行，避免输出冗余内容
    wp_die();
}

3. 管理员页面展示数据 #

创建自定义短代码，用于在管理员可见页面展示已保存的数据：

add_shortcode('admin_reservation_list', 'display_admin_reservations');

function display_admin_reservations() {
    // 仅允许管理员访问
    if (!current_user_can('manage_options')) {
        return '无权限访问';
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'reservations';
    $reservations = $wpdb->get_results("SELECT * FROM $table_name ORDER BY created_at DESC");

    if (empty($reservations)) {
        return '暂无预订数据';
    }

    // 生成展示表格
    $output = '<table border="1" cellpadding="8">';
    $output .= '<tr><th>ID</th><th>出发日期</th><th>返回日期</th><th>创建时间</th></tr>';
    foreach ($reservations as $res) {
        $output .= sprintf('<tr><td>%d</td><td>%s</td><td>%s</td><td>%s</td></tr>',
            $res->id,
            $res->date_go,
            $res->date_back,
            $res->created_at
        );
    }
    $output .= '</table>';

    return $output;
}

将短代码[admin_reservation_list]添加到你的/test/页面（需设置页面仅管理员可见），即可展示保存的数据。

关键注意事项 #

• 必须用wp_die()终止AJAX回调，否则WordPress会输出冗余内容导致响应异常
• 对用户输入的数据必须做安全过滤（如sanitize_text_field），防止SQL注入和XSS攻击
• 若允许未登录用户提交数据，需添加钩子：add_action('wp_ajax_nopriv_save_reservation_data', 'handle_reservation_submission');

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