Fetch отправка запроса к php обработчику?

Question

[Остап]

Всем привет.. Помогите, пожалуйста, разобраться. отправляю запрос с помощью fetch, но на обработчик ничего не приходит. $_POST пуст.

e.preventDefault();
        const data = this.state;
        console.log(data);
        fetch("send.php", {
            method: "POST",
            body: data,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        }).then(response => {
            console.log(response.text());

        });

$postData= $_POST;
var_dump($postData);

консоль:
Promise {}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "array(0) {↵}↵"

Comments

[Антон Шаманов]

какой код у этого fetch?

[Остап]

Антон Шаманов, все коды в вопросе

[Арсений Матыцин]

1. Нет ли данных типа formData в body?
2. Привяжи перехватчик catch(error) и выведи ее, если есть.
3. Проверь пути выполнения php кода (сейчас у тебя относительный путь от текущей директории).

[Антон Шаманов]

Остап, а в this.state json строка?

[Остап]

Антон Шаманов,

state = {
        vin: '',
        carBrand: '',
        carModel: '',
        carModification: '',
        carYear: '',
        carPart: '',
        counterpart: '',
        description: '',
        name: '',
        address: '',
        phoneNumber: ''

    };

    ChangeInput = (e) => {


        // console.log(e);
        const {id, value} = e.target;
        this.setState({[id]: value});
        // console.log(this.state);
    };
    onSubmit = (e) => {
        e.preventDefault();
        const data = this.state;
        console.log(data);
        fetch("send.php", {
            method: "POST",
            body: data,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        }).then(response => {
            console.log(response.text()).catch(error);

        });

    };

[Антон Шаманов]

Остап, а в консоле браузерной запрос уходит? и нет ли в бекенде проверки на ajax запрос? визуально все ок

[Остап]

Антон Шаманов,
консоль:
Promise {}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "array(0) {↵}↵"

[Остап]

Антон Шаманов, Спасибо. проверил на бекенде и это не ajax запрос! Подскажите, пожалуййста как быть

[Evanescing]

Остап, какого формата ответ должен быть с бекенда? текст или всё же response.json()?
обычно, на бекенде можно ставить различные проверки и возвраты ответа, а также статусов ответа, чтобы понять что тянуть на фронтенде.

[Антон Шаманов]

Остап, обычно используется заголовок 'X-Requested-With: XMLHttpRequest' либо в нижнем регистре

[Александр]

пробовал?

$json = file_get_contents('php://input')
var_dump($json);

[Остап]

Evanescing, на бекенде должно уходить письмо с полученными данными.

[Остап]

@@SilenceOfWinter, вот вообще не понял что делать с этим заголовком X-Requested-With: XMLHttpRequest. Куда его???
Подскажите, пожалуйста.

[Evanescing]

Остап,

на бекенде должно уходить письмо с полученными данными.

при этом возвращается статус успеха
Promise {}
__proto__: Promise
[[PromiseStatus]]: "resolved"
Не понятно какие ещё данные Вы ожидаете получить. Согласно информации логика выглядит вполне рабочей.

С заголовками всё нормально, раз с бэкенда приходит статус успеха.
Разве-что входящие данные пустые или не по формату: this.state
Если this.state не пустой - как вариант, ставим валидацию всех полей на бэкенде и отлаживаем поочередно их возвращая результат валидации на фронтенд. При этом точно нужно знать, что отправка почты включена и работает в целом.

Answer 1

[Надим]

Попробуйте использовать XMLHttpRequest:

function send_form() {
  var send_text = 'Проверка';
  var xhr = new XMLHttpRequest();
  var body = 'text=' + encodeURIComponent(send_text);
  xhr.open('POST', 'send.php');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      alert(xhr.responseText);
    }
  }
  xhr.send(body);
}