Как мне отформатировать JSON в Vue, используя Ax ios, чтобы это выглядело так?

Question

Я часами пытался выяснить, как отформатировать мой JSON в Vue. js, чтобы отправить его таким образом:

В данный момент я пытаюсь сделать это с объектом FormData (), но результат по-прежнему просто:

My функция выглядит следующим образом:

register () {
        var bodyFormData = new FormData();
        bodyFormData.append('firstname', 'Coca');
        bodyFormData.append('lastname', 'Cola')
        console.log(jsonData)
        axios({
          method: 'post',
          url: 'backend/index.php?action=createUser',
          data: bodyFormData,
          headers: {'Content-Type': 'multipart/form-data' }
          })
          .then(function (response) {
              //handle success
              console.log(response);
          })
          .catch(function (response) {
              //handle error
              console.log(response);
          });
      }

Я получил результат на первом снимке с помощью jQuery AJAX вызовов, возможно ли это с Ax ios в Vue?

Answer 1

Вы явно используете Content-Type: multipart/form-data и отправляете данные формы для вашего параметра data. Чтобы отправить JSON, установите data для объекта, который вы хотите сериализовать как JSON, и используйте application/json в качестве content-type.

async register () {
  try {
    const response = await axios({
      method: 'post',
      url: 'backend/index.php?action=createUser',
      data: { firstname: 'Coca', lastname: 'Cola' },
      headers: {'Content-Type': 'application/json' }
    });
    //handle success
    console.log(response);
  } catch (err) {
    //handle error
    console.log(err);
  }
}

Answer 2

Вы можете использовать метод JSON.stringify и добавить свой объект к данным формы.

bodyFormData.append('data', JSON.stringify(jsonData));

Answer 3

Спасибо за ваши ответы, мне фактически пришлось создать FormData и заполнить его строковыми JSON данными.