Jet Engine 表单与 Webhook 的重定向：突破 Ajax 限制

2024-03-08 11:21:57

Jet Engine 表单：从 Webhook 中实现重定向

在构建依赖 Jet Engine 表单和 Webhook 集成的自定义应用程序时，我们遇到了一个独特的挑战：需要将用户重定向到另一个页面，具体取决于 Webhook 响应的结果。

背景

Jet Engine 是一个功能强大的 WordPress 插件，允许我们创建自定义表单并执行各种自动化操作。Webhook 是从外部应用程序接收 HTTP 请求的机制。我们设置了一个 Jet Engine 表单，当用户提交时，它会触发一个 Webhook，该 Webhook 尝试进行预订并返回结果。

挑战

我们最初尝试使用 wp_redirect 和返回 WP_REST_Response 来实现重定向，但这些方法都没有成功。表单只是关闭了，并没有将用户重定向到正确的页面。

解决方案

经过进一步的研究，我们发现这是因为从 Ajax 上下文返回重定向会将重定向发送到发出请求的 JavaScript 客户端，而不是直接发送到用户的浏览器。

为了解决这个问题，我们采用了以下解决方案：

使用 JavaScript 重定向： 在 Webhook 响应中，我们返回一个重定向 URL，然后使用 JavaScript 将用户重定向到该 URL。此方法允许我们在浏览器中处理重定向，而无需依赖 Ajax。
使用 PHP 头： 另一种方法是在 PHP 中使用 header 函数来设置重定向。这会将重定向指令直接发送到浏览器，绕过 JavaScript。

实现

我们使用 JavaScript 方法来实现重定向。以下代码显示了 Webhook 响应中返回的内容：

{
  redirect: 'https://[redacted]/buchungswunsch-erhalten/'
}

在 Jet Engine 表单中，我们添加了一个自定义动作，该动作使用 JavaScript 将用户重定向到响应中提供的 URL：

add_action( 'jet_engine/forms/actions/custom/save_data', 'my_custom_action', 10, 3 );

function my_custom_action( $form, $submission, $ajax_data ) {
  if ( ! empty( $ajax_data['redirect'] ) ) {
    echo "<script>window.location.href = '" . $ajax_data['redirect'] . "';</script>";
  }
}