WPForms下拉菜单联动WordPress数据库遇404错误求助

核心错误分析 #

你遇到的404错误根源是前端JS中的PHP代码未被WordPress解析：

var adminAjaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>";

这段代码直接被输出到页面，没有被WordPress的PHP引擎处理，导致请求URL变成了包含<?php ... ?>的无效地址，自然返回404。

完整解决方案 #

1. 修复AJAX URL传递（WordPress标准方式） #

不要直接在JS里写PHP代码，把HTML/JS整合到短码函数中，让PHP代码能被正确解析：

function custom_dropdown() {
    ob_start();
    ?>
    <!-- Dropdown HTML -->
    <div>
        <select id="number-dropdown">
            <option value="" disabled selected>Wählen Sie eine Zahl</option>
            <!-- Optionen werden dynamisch von JavaScript erstellt -->
        </select>
    </div>

    <!-- AJAX-Anfrage, um die ausgewählten Zahlen abzurufen -->
    <script>
        var adminAjaxUrl = "<?php echo esc_js(admin_url('admin-ajax.php')); ?>";
        
        function fetchSelectedNumbers() {
            return new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', adminAjaxUrl, true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function () {
                    if (this.status >= 200 && this.status < 400) {
                        // 把返回的字符串转为数字数组，避免类型匹配错误
                        var selectedNumbers = JSON.parse(this.response).map(Number);
                        resolve(selectedNumbers);
                    } else {
                        reject(new Error('Fehler beim Abrufen der ausgewählten Zahlen.'));
                    }
                };
                xhr.onerror = function () {
                    reject(new Error('Fehler beim Abrufen der ausgewählten Zahlen.'));
                };
                xhr.send('action=get_selected_numbers');
            });
        }
        
        var hiddenFieldID = 'wpforms-531-field_82';
        var dropdown = document.getElementById('number-dropdown');
        var hiddenField = document.getElementById(hiddenFieldID);
        
        fetchSelectedNumbers()
            .then(function (selectedNumbers) {
                for (var i = 1; i <= 140; i++) {
                    if (selectedNumbers.indexOf(i) === -1) {
                        var option = document.createElement('option');
                        option.value = i;
                        option.textContent = i;
                        dropdown.appendChild(option);
                    }
                }
            })
            .catch(function (error) {
                console.error('Fehler beim Abrufen der ausgewählten Zahlen:', error);
            });
        
        dropdown.addEventListener('change', function () {
            hiddenField.value = this.value;
        });
    </script>
    <?php
    return ob_get_clean();
}

add_shortcode('custom_dropdown', 'custom_dropdown');

2. 修复数据库表的唯一性约束 #

你的数据库表目前只对id加了唯一键，但number字段也需要唯一约束，防止重复存储同一个数字：

function create_selected_numbers_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'selected_numbers';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE {$table_name} (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        number smallint NOT NULL,
        UNIQUE KEY id (id),
        UNIQUE KEY number (number)
    ) {$charset_collate};";

    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

3. 补充表单提交后存储数字的逻辑 #

你目前只实现了获取已选数字的功能，还需要添加WPForms提交钩子，把选中的数字存入数据库：

function save_selected_number_on_form_submit($entry, $form_data) {
    // 只处理指定的表单（这里是ID为531的表单，根据实际情况修改）
    if ($form_data['id'] != 531) {
        return;
    }
    
    // 获取隐藏字段的值（即选中的数字）
    $selected_number = isset($entry['fields'][82]) ? intval($entry['fields'][82]) : 0;
    
    if ($selected_number > 0 && $selected_number <= 140) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'selected_numbers';
        
        // 插入数字，利用唯一键避免重复
        $wpdb->insert(
            $table_name,
            array('number' => $selected_number),
            array('%d')
        );
    }
}
add_action('wpforms_process_complete', 'save_selected_number_on_form_submit', 10, 2);

验证步骤 #

1. 确保短码[custom_dropdown]正确添加到WPForms的表单页面中
2. 激活自定义插件（代码放在插件中）或刷新主题functions.php（代码放在主题中）
3. 测试表单提交，提交后检查数据库wp_selected_numbers表是否有新增记录
4. 刷新页面，下拉菜单中已提交的数字应该会消失

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