自定义WordPress API端点表单提交后如何实现重定向？

核心原因分析 #

JetForm Builder默认通过AJAX异步提交表单，后端返回的303重定向头或wp_redirect()只会作用于AJAX请求本身，浏览器不会自动触发页面跳转——前端会接收响应并显示默认的“表单提交成功”提示，这就是你在前端看不到跳转，但Postman测试正常的根本原因。

具体解决步骤 #

1. 调整后端端点返回逻辑

不再返回重定向响应，改为返回包含目标URL的JSON数据：

function submit_application( $request ) {
    // 业务逻辑执行成功
    $user = send_data($data);

    try {
        return new \WP_REST_Response(
            [
                'redirect_url' => $user['url'],
                'status' => 'success'
            ],
            200
        );
    } catch (Exception $e) {
        return new WP_REST_Response( [
            'status' => 'error',
            'message' => $e->getMessage()
        ], 400 );
    }
}

2. 前端拦截提交事件实现跳转

通过JetForm Builder的原生事件，监听表单提交成功后获取返回的URL并跳转。将以下代码添加到主题的functions.php中：

add_action('wp_footer', 'jetform_custom_redirect');
function jetform_custom_redirect() {
    ?>
    <script>
        document.addEventListener('jetFormSubmitSuccess', function(event) {
            // 检查响应是否包含跳转URL
            if (event.detail.response && event.detail.response.redirect_url) {
                window.location.href = event.detail.response.redirect_url;
            }
        });
    </script>
    <?php
}

3. 缓存排查与处理

如果之前代码生效过后来失效，优先排查缓存问题：

• 清除WordPress缓存插件（如WP Rocket、W3 Total Cache）的缓存
• 用浏览器无痕模式测试，避免前端JS缓存
• 若自定义JS文件被缓存，可添加版本号强制刷新：

add_action('wp_enqueue_scripts', 'enqueue_custom_jetform_js');
function enqueue_custom_jetform_js() {
    wp_enqueue_script(
        'custom-jetform-redirect',
        get_stylesheet_directory_uri() . '/custom-jetform.js',
        array(),
        time(), // 开发阶段用time()强制刷新，上线后改为固定版本号
        true
    );
}

4. 验证端点返回

用Postman再次请求端点，确认返回的JSON数据中redirect_url是有效的完整URL（需包含http://或https://）。

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