Как перенаправить с помощью пользовательской конечной точки API WordPress после отправки формы?

Содержание

Вопрос или проблема
Ответ или решение
Шаги для осуществления перенаправления после отправки формы через REST API WordPress
Заключение
Важные заметки:

Вопрос или проблема

Я использую собственную конечную точку wordpress, которую я определил в functions.php:

add_action('rest_api_init', function () {
    register_rest_route('custom_endpoint', 'submit-application', [
        'methods' => 'POST',
        'callback' => 'submit_application'
    ]);
});

Я использую эту конечную точку для обработки данных формы, отправленных через jetform builder. После обработки данных формы (различные вызовы к внешнему api), я хотел бы перенаправить на URL, который возвращается API динамически. В настоящее время бизнес-логика проходит успешно, но я не могу заставить перенаправление работать. Форма отправляется и отображает сообщение “Форма успешно отправлена”.

function submit_application ( $request ) {

  //Бизнес-логика здесь проходит успешно

  $user= send_data($data);

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

Я также пробовал использовать

    wp_redirect( $user['url'] );
    exit();

Странно, что мне удалось это сделать однажды, с тем, что я думаю, это именно этот код, но вдруг после того, как я продолжил разработку, это перестало работать. Также странно, потому что когда я пытаюсь конечную точку через postman вместо отправки формы, кажется, что она правильно получает перенаправление. Может быть, это указывает на проблему с кешированием? Я немного новичок в wordpress, поэтому любые идеи будут очень приветствоваться!

Если вы используете javascript для отправки данных формы на REST конечную точку, то вам следует обрабатывать перенаправление на стороне клиента, а не на сервере с помощью PHP. Прочитайте заголовок location из ответа и передайте его в window.location, чтобы перенаправить пользователя куда-то.

Вот упрощенный пример – не протестировано, требует доработки.

document.getElementById('my-form').addEventListener('submit', (event) => {
    event.preventDefault();

    submitViaRestApi(event)
        .then(response => redirectToLocation(response.location))
        .catch(error => console.error(error));
});

function redirectToLocation(location) {
    // как клик мышью
    // window.location.href = location;
    // или
    // HTTP перенаправление
    // window.location.replace(location);
    // Узнайте о window.location на https://developer.mozilla.org/en-US/docs/Web/API/Location
}

function submitViaRestApi(event) {
    return new Promise((resolve, reject) => {
        // отправить данные на REST конечную точку
    });
}

Ответ или решение

Для того чтобы корректно перенаправить пользователя после отправки формы через пользовательскую конечную точку API в WordPress, важно понимать, что перенаправление требует корректной обработки как на серверной, так и на клиентской стороне. В вашем случае, когда вы используете JavaScript для отправки данных формы, необходимо делать это на стороне клиента. Давайте разберем процесс более подробно.

Шаги для осуществления перенаправления после отправки формы через REST API WordPress

Определение конечной точки API:
Вы уже зарегистрировали конечную точку REST API в файле functions.php, что является правильным шагом.
```
add_action('rest_api_init', function () {
   register_rest_route('custom_endpoint', 'submit-application', [
       'methods' => 'POST',
       'callback' => 'submit_application'
   ]);
});
```

Обработка отправки данных:
Ваш метод submit_application обрабатывает поступившие данные. Вам не нужно пытаться перенаправить пользователя на серверной стороне, поскольку это нормально работает через JavaScript.

function submit_application($request) {
   // Логика обработки данных формы
   $user = send_data($data);

   try {
       return new \WP_REST_Response(
           [ 'url' => $user['url'] ],  // Вернуть URL для перенаправления
           200
       );
   } catch (Exception $e) {
       return new WP_REST_Response([
           'status' => 'error',
           'message' => $e->getMessage()
       ], 400);
   }
}

Отправка данных с использованием JavaScript:
Вам нужно управлять отправкой данных и перенаправлением в браузере. В следующем примере показано, как можно сделать это:

document.getElementById('my-form').addEventListener('submit', (event) => {
   event.preventDefault(); // Предотвращаем стандартное поведение формы

   const formData = new FormData(event.target);

   // Отправляем данные на конечную точку API
   fetch('/wp-json/custom_endpoint/submit-application', {
       method: 'POST',
       body: formData,
   })
   .then(response => {
       if (!response.ok) {
           throw new Error('Сетевая ошибка!');
       }
       return response.json();
   })
   .then(data => {
       // Перенаправление на URL, возвращенный API
       if (data.url) {
           window.location.href = data.url;
       } else {
           console.error('URL не найден');
       }
   })
   .catch(error => console.error('Ошибка:', error));
});

Заключение

На стороне клиента вы обрабатываете результат ответного сообщения с сервера и выполняете перенаправление с помощью window.location.href. Это не только позволяет избежать проблем с кэшированием, но и является более правильным способом обработки перенаправления после AJAX-запросов.

Важные заметки:

Убедитесь, что у вас правильно настроены CORS-бирки, если ваш фронтенд и бэкенд находятся на разных доменах.
Проверьте, нет ли проблем с кэшированием вашего JavaScript или файла API. Для этого можно временно отключить кеш и проверить, работает ли перенаправление.
Убедитесь, что все переменные и элементы формы корректно указаны для предотвращения ошибок исполнения скрипта.

Таким образом, следуя представленным шагам, вы сможете корректно обработать перенаправление пользователя после успешной отправки формы на кастомный API WordPress, избегая проблем и несовместимостей.