Как отправить форму используя fetch, обработать в php и вернуть ответ?

Question

[Максим Калинин]

Собственно на React написан метод, который выполняется как только пользователь отправляет форму:

handleSubmit(e){
    e.preventDefault();
    let callBack = new FormData(e);
    fetch('http://127.0.0.1', {
      method: 'POST',
      headers: {
        "Content-Type": "multipart/form-data"
      }, 
      body: callBack
    }).then(res => res.json()).then((result) => {console.log('Result = ' + result)}, (error) => {console.log('Error = ' + error)});
  }

Обработчик php(он запущен на OpenServer, и с 127.0.0.1 делает редирект на файл обработчик):

<?php
$data = $_REQUEST["callBack"];
print_r($data);
?>

Почему-то после отправки формы получаю ошибку:
Modal.js:45 Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

Comments

[0xD34F]

Вы сообщение об ошибке хотя бы прочитать попытались? - там ведь прямым текстом сказано, что не так делаете.

[Максим Калинин]

0xD34F, в таком случае как мне передать именно форму?

[0xD34F]

Максим Калинин, сами как-то попытались ответить на этот вопрос? В смысле, погуглить немного. Типа, имею на руках объект события, как из него достать элемент, к которому привязан обработчик. Нет, не царское это дело?

Answer 1

[Alex]

`e` в данном случае - объект события. `FormData` ожидает HTML элемент FORM. Попробуйте взять `e.target`.

let callBack = new FormData(e.target);