ReactJS Fetch замена замены для этого шаблона AJAX

Question

Справочная информация:

Следующий код AJAX успешно работает (ReactJS + JQuery frontend, PHP backend).

    const data = {request_type:"load_data", start:1, end:50};

    $.ajax({
        type: "POST",
        url: "http://localhost/site/server.php",
        data: data,
        dataType: "json", 
        success: (JSobject) => {
            this.setState({arr: JSobject.arr});
        }
    });

В Chrome Dev Tools * Заголовки server.php отображаются как "Form Data", например:

В серверной части PHP есть строка кода:

    $request_type = $_POST["request_type"];

---

Пытаясь научиться делать Fetch (я пока избегал этого, главным образом потому, что у меня был хорошо работающий шаблон AJAX), я пытался создать замену для вышеприведенного кода. .

Я пробовал это:

    const data = {request_type:"load_data", start:1, end:50};

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: data
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

Но я получаю эту ошибку PHP:

Примечание: неопределенный индекс: request_type в ..... server.php

А в Chrome Dev Tools * Заголовки server.php выглядят так:

---

Итак, я попытался изменить данные на JSON.stringify (data) следующим образом:

    const data = {request_type:"load_data", start:1, end:50};

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: JSON.stringify(data)
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

Но я все еще получаю ту же самую ошибку PHP:

Примечание: неопределенный индекс: request_type в ..... server.php

А в Chrome Dev Tools * Заголовки server.php отображаются так:

---

Из-за общего разочарования (хотя это бессмысленно, потому что я все еще буду использовать JQuery), я подумал, что буду использовать $.param() JQuery, и это наверняка сработает.

Итак, я попробовал это:

    const data = $.param({request_type:"load_data", start:1, end:50});

    fetch("http://localhost/site/server.php", {
        method: "POST",
        body: data
    })
        .then((JSobject) => {
            this.setState({arr: JSobject.arr});
        });

Тем не менее получить ту же ошибку PHP

Примечание: неопределенный индекс: request_type в ..... server.php

А в Chrome Dev Tools * Заголовки server.php отображаются так:

---

Мой вопрос: как мне изменить приведенный выше код Fetch, чтобы он стал заменой для кода AJAX вверху.

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

Answer 1

Отвечая на мой собственный вопрос для тех, кто может столкнуться с этой проблемой в будущем (а также для моего собственного ознакомления). Разобрался с ответом по этой ссылке и по этой ссылке . Сработал следующий код:

fetch("http://localhost/site/server.php", {
    method: "POST",
    body: JSON.stringify(data)
}).then(response => {
      return response.json();
   }).then((JSobject) => {
       this.setState({arr: JSobject.arr});
      });

Мне пришлось изменить некоторый код PHP на сервере. Первоначальный код «привратника» был:

$_POST = array_map("trim", $_POST);

$request_type = $_POST["request_type"];

Это должно быть закомментировано:

$_POST = array_map("trim", $_POST);   //this had to be commented out

И это нужно было добавить вместо:

$content = trim(file_get_contents("php://input"));
$_POST = json_decode($content, true);

А в Chrome Dev Tools * Заголовки server.php отображаются как "Request Payload":

---

Я также видел несколько предложений по добавлению ключа "headers", например:

fetch("http://localhost/site/server.php", {
    method: "POST",
    headers: {"Content-Type": "application/x-www-form-urlencoded",},
    body: JSON.stringify(data)
}).then(response => {
      return response.json();
   }).then((JSobject) => {
       this.setState({arr: JSobject.arr});
      });

Это также сработало, но в Chrome Dev Tools server.php заголовки отображаются как "Form Data":

---

Еще один способ сделать это - обернуть объект (для отправки) в $.param() JQuery (меня это заинтересовало, потому что я часто использую $.param() для добавления значений ключа к form.serialize() на стороне клиента. перед отправкой на PHP на сервер)

const data = $.param({request_type:"load_data", start:1, end:50});

fetch("http://localhost/site/server.php", {
method: "POST",
headers: {"Content-Type": "application/x-www-form-urlencoded",},
body: data
}).then(response => {
   return response.json();
     }).then((JSobject) => {
      this.setState({arr: JSobject.arr});
       });

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

В Chrome Dev Tools * Заголовки server.php отображаются как "Form Data":

---

Без использования JQuery:

Re: предыдущий метод (с использованием $.param()), возможно сделать это полностью без JQuery, но тогда потребуется некоторая функция для цепочки пар ключ-значение объекта javascript при правильном кодировании специальных символов в виде x- www-form-urlencoded ( эта ссылка объясняет, как это сделать).

Например, вместо этого:

const data = $.param({request_type:"load_data", start:1, end:50});

...
body: data

Можно было бы сделать это:

const data = {request_type:"load_data", start:1, end:50};

...

...
body: "request_type=load_data&start=1&end=50"