Не могу понять особенностей POST запроса в fetch

Question

Пытаюсь отправить POST запрос через fetch. Ранее для этих целей использовал jquery $.ajax

Вот мой код:

fetch("/", {
    method: 'POST',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'mode=ajax&action=delete_opt&opt=' + this.arr_opt_to_delete

  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })

В принимающем коде, в PHP скрипте, делаю вывод в файл:

file_put_contents("/home/web/ing.txt", print_r($_POST, true), FILE_APPEND);

И получаю результат:

Array
(
    [mode] => ajax
    [action] => delete_opt
    [opt] => ite,koni,vio
)

Ранее я использовал jquery $.ajax и получал как и положено массив. Добавил код:

$.ajax("/", {
  cache: false,
  data: {
    "mode": "ajax",
    "action": "delete_opt",
    "opt": this.arr_opt_to_delete
  },
  dataType: "json",
  type: "POST",
  success: function(dt) {

    console.log(dt);

  },
  error: function() {
    alert("err55");
  }
});

И ожидаемо получил:

Array
(
    [mode] => ajax
    [action] => delete_opt
    [opt] => Array
        (
            [0] => ite
            [1] => koni
            [2] => vio
        )

)

Почему через jquery $.ajax данные [opt] приходят как и положено массивом, а через fetch я получаю строку ite,koni,vio ?? Как добиться, чтобы [opt] приходили массивом через fetch?

Answer 1

Подозреваю что массив оформлен не так как нужно для json

{
  "items": [
    { "id": 1, "name": "name1" },
    { "id": 2, "name": "name2" },
    { "id": 3, "name": "name3" }
  ] 
}

Answer 2

Разница заключается в разных content-type.

Поэтому, нужно либо сделать его одинаковым и передавать значения в одинаковом виде

const data = {
  "mode": "ajax",
  "action": "delete_opt",
  "opt": this.arr_opt_to_delete
}

fetch("/", {
  method: 'POST',
  headers: {
    "Content-type": "application/json; charset=UTF-8"
  },
  body: JSON.stringify(data)    
})

, либо правильно организовать параметры для текущего content-type, а именно делать параметр opt массивом, например:

body: 'mode=ajax&action=delete_opt&' + this.arr_opt_to_delete.map(opt=>`opt[]=${opt}`).join('&')

БЛОГ НА HUSL

Не могу понять особенностей POST запроса в fetch

Ответы (2 шт):