WordPress AJAX POST请求失效：点击按钮页面刷新而非弹窗显示结果

以下是针对你代码中问题的具体修复步骤：

1. 完善表单字段的必填验证 #

原表单中LIGNE_VOY和DAT_VOY字段未添加required属性，当用户未填写这两个字段时，浏览器原生表单验证会触发并跳过AJAX逻辑，直接导致页面刷新。修改表单代码：

<select name="LIGNE_VOY" class="form-control " id="LIGNE_VOY" required>
    <option value="">Select Line</option>
    <?php
        if (isset($response['data']) && is_array($response['data'])) {
            foreach ($response['data'] as $model) {
                echo '<option value="' . esc_attr($model['TRLI_UID']) . '">' . esc_html($model['TRLI_DES_LN3']) . ' </option>';
            }
        }
        ?>
</select>

<input type="date" class="form-control mt-2" id="DAT_VOY" name="DAT_VOY" required />

同时给输出的option值和文本加上esc_attr和esc_html，避免XSS风险。

2. 确保AJAX事件绑定稳定 #

内联脚本可能存在执行时机冲突，建议将JS代码移到外部文件并正确入队：

• 取消注释你的add_enqueue_JS函数，同时传递AJAX地址到前端：

function add_enqueue_JS(){
    wp_enqueue_script('API_SRTB_Voyage', get_stylesheet_directory_uri().'/assets/js/custom.js', array('jquery'), '1.0', true);
    wp_localize_script('API_SRTB_Voyage', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'add_enqueue_JS');

• 在custom.js中写入AJAX逻辑：

jQuery(document).ready(function($) {
    $('#voyageForms').on('submit', function(event) {
        event.preventDefault();
        // 先检查表单是否通过原生验证
        if (!this.checkValidity()) {
            event.stopPropagation();
            this.classList.add('was-validated');
            return;
        }
        var formData = $(this).serialize();
        console.log(formData);
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'submit_voyage_form',
                form_data: formData
            },
            success: function(response) {
                if (response.success) {
                    var tableBody = $("#tableBody");
                    tableBody.empty();
                    var data = response.data;
                    data.forEach(function(row, index) {
                        // 转义HTML内容避免XSS
                        var distance = $('<div>').text(row.DISTANCE_KM).html();
                        var duree = $('<div>').text(row.DUREE).html();
                        var heureDepart = $('<div>').text(row.HEURE_DEPART).html();
                        var arrivee = $('<div>').text(row.ARRIVEE).html();
                        var depart = $('<div>').text(row.DEPART).html();
                        tableBody.append("<tr><td>" + distance +
                            "</td><td>" + duree + "</td><td>" + heureDepart +
                            "</td><td>" + arrivee + "</td><td>" + depart +
                            "</td><td>" + (index + 1) + "</td></tr>");
                    });
                    $("#resultModal").modal("show");
                } else {
                    alert('Error: ' + response.data);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                alert('请求失败，请稍后重试');
            }
        });
    });
});

3. 清理无用脚本 #

移除enqueue_custom_scripts中的custom-ajax脚本，它和你的AJAX功能无关：

function enqueue_custom_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js', array('jquery'), null, true);
    wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

4. 强化后端数据安全 #

在handle_voyage_form_submission函数中，对接收的表单数据进行安全处理：

function handle_voyage_form_submission() {
    if (!isset($_POST['form_data'])) {
        wp_send_json_error('无效的请求参数');
    }
    parse_str($_POST['form_data'], $form_data);

    $SENS_VOY = sanitize_text_field($form_data['SENS_VOY'] ?? '');
    $DAT_VOY = sanitize_text_field($form_data['DAT_VOY'] ?? '');
    $LIGNE_VOY = sanitize_text_field($form_data['LIGNE_VOY'] ?? '');

    if (empty($SENS_VOY) || empty($DAT_VOY) || empty($LIGNE_VOY)) {
        wp_send_json_error('请填写所有必填字段');
    }

    // 验证日期格式
    $dateObj = DateTime::createFromFormat('Y-m-d', $DAT_VOY);
    if (!$dateObj || $dateObj->format('Y-m-d') !== $DAT_VOY) {
        wp_send_json_error('无效的日期格式');
    }
    $date = $dateObj->format('d-m-Y');

    // 后续curl请求代码保持不变...
}

调试建议 #

• 打开浏览器开发者工具（F12），切换到Console标签，查看是否有JS错误提示
• 切换到Network标签，查看AJAX请求是否发送，以及返回的状态码和响应内容

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