如何实现客户端HTML selectBox数据提交至WordPress服务器并处理

一、HTML表单代码编写 #

如果你的自定义网页是基于WordPress模板/页面编辑器制作，直接使用以下代码（动态生成安全验证字段）：

<form method="post" action="">
    <!-- WordPress安全验证字段，防止跨站请求伪造 -->
    <?php wp_nonce_field('select_form_submit', 'select_form_nonce'); ?>
    
    <label for="user_selection">选择选项：</label>
    <select id="user_selection" name="user_selection">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
    
    <button type="submit" name="submit_select_form">提交</button>
</form>

如果是纯静态HTML页面（未嵌入WordPress环境），需要先在WordPress后台用wp_create_nonce('select_form_submit')生成安全验证值，再手动添加隐藏字段：

<form method="post" action="你的WordPress处理页面URL">
    <input type="hidden" name="select_form_nonce" value="这里填入生成的nonce值">
    
    <label for="user_selection">选择选项：</label>
    <select id="user_selection" name="user_selection">
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
    </select>
    
    <button type="submit" name="submit_select_form">提交</button>
</form>

二、服务器端数据处理（使用代码片段插件） #

打开代码片段插件，新建一个代码片段，粘贴以下PHP代码并启用：

// 监听表单提交请求
add_action('init', 'handle_select_form_submission');

function handle_select_form_submission() {
    // 验证请求类型与提交标识
    if ($_SERVER['REQUEST_METHOD'] !== 'POST' || !isset($_POST['submit_select_form'])) {
        return;
    }

    // 安全验证：检查nonce合法性
    if (!isset($_POST['select_form_nonce']) || !wp_verify_nonce($_POST['select_form_nonce'], 'select_form_submit')) {
        wp_die('安全验证失败，请重试。');
    }

    // 获取并清洗用户输入
    $selected_value = isset($_POST['user_selection']) ? sanitize_text_field($_POST['user_selection']) : '';

    if (empty($selected_value)) {
        // 处理未选择选项的情况
        $_SESSION['form_error'] = '请选择一个有效选项！';
        wp_redirect($_SERVER['HTTP_REFERER']);
        exit;
    }

    // --------------------------
    // 这里编写你的自定义处理逻辑
    // 示例1：保存到WordPress全局选项
    // update_option('user_selected_option', $selected_value);
    // 示例2：发送通知邮件
    // wp_mail('你的邮箱@example.com', '用户提交了选择', '选择内容：' . $selected_value);
    // 示例3：写入自定义数据库表
    // global $wpdb;
    // $wpdb->insert('你的表名', ['selection' => $selected_value]);
    // --------------------------

    // 处理完成后返回提示并跳转
    $_SESSION['form_success'] = '提交成功！你选择的是：' . $selected_value;
    wp_redirect($_SERVER['HTTP_REFERER']);
    exit;
}

可选：添加提交提示 #

在表单所在页面的合适位置添加以下代码，用于显示提交结果：

<?php
if (isset($_SESSION['form_success'])) {
    echo '<div style="color: green; padding: 10px;">' . $_SESSION['form_success'] . '</div>';
    unset($_SESSION['form_success']);
}
if (isset($_SESSION['form_error'])) {
    echo '<div style="color: red; padding: 10px;">' . $_SESSION['form_error'] . '</div>';
    unset($_SESSION['form_error']);
}
?>

内容的提问来源于stack exchange，提问作者Abd Alhaleem Bakkor