Axios. Как отправить данные через Post?

Question

Есть такой код:

data () {
    return {
      loading_cell_phone_number: '',
      loading_zip_code: '',
      loading_city: '',
      loading_street: '',
      loading_house_number: '',
      loading_company_name: '',
      loading_first_name: '',
      loading_surname: '',
    }
  },

methods: {

     sendTrackerClientData: function () {
      axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=", this.$store.state.tracking_data.key_id+
        {data2: 1 }
        , {
           params: {
             user_key_id: this.$store.state.localStorage.userKeyId,
           },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(response => {
      
        })
        .catch(function (error) {
          console.log(error);
        });
    },

  },

В данном примере можно пронаблюдать попытку отправки данных(обратить внимание на параметр `{data2: 1 }`) на сервер - через Post запрос.

Вместо того что бы с указанного параметра отправить данные в виде ключ - значение - в моем случае отправляется следующее:

Вопросы:

1) Почему в виде значения я передаю пустую строку, а в виде параметра ключ вместе со значением?

2) Возможно ли в данном случае каким то образом через post - отправить данные таким образом, что бы ключем было значение: `data2`
а значением этого ключа было `1`и безо всяких пустых строк?

Answer 1

    axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=" + this.$store.state.tracking_data.key_id, {
         data2: 1,
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

Попробуйте так на сервер должно прийти data2 = 1

Answer 2

Можно отправить так:

            axios({
                method: 'POST',
                url: 'https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=' + this.$store.state.tracking_data.key_id,
                params: { data2: 1 }
            }).then((response) => {
                console.log(response.data);
            })

Или просто перенести data2: 1 в params, если я правильно понял

data () {
    return {
      loading_cell_phone_number: '',
      loading_zip_code: '',
      loading_city: '',
      loading_street: '',
      loading_house_number: '',
      loading_company_name: '',
      loading_first_name: '',
      loading_surname: '',
    }
  },

methods: {

     sendTrackerClientData: function () {
      axios.post("https://seo-gmbh.eu/couriertracker/json/couriertracker_api.php?action=tracking.data_save&key_id=", this.$store.state.tracking_data.key_id+, {
           params: {
             user_key_id: this.$store.state.localStorage.userKeyId,
             data2: 1
           },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .then(response => {
      
        })
        .catch(function (error) {
          console.log(error);
        });
    },

  },

Answer 3

Используйте следующие параметры, чтобы настроить Axios

axios({
 url: '...',
 params: {...},
 data: {...} 
})

url - URL, на который будет сделан запрос

params - параметры URL, которые будут отправлены с запросом

data - данные, которые будут отправлены как тело запроса. Применяется только для методов запроса PUT, POST, DELETE , and PATCH. Когда transformRequest не установлен, должен быть одного из следующих типов:

// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer

ОБРАТИТЕ ВНИМАНИЕ НА DATA, ТИП КОТОРОГО ЗАВИСИТ ОТ ЗАГОЛОВКОВ КОТОРЫЕ ВЫ БУДЕТЕ ПРЕДАВАТЬ

headers - заголовки для запроса

Вот пример:

для "Content-type": "application/json; charset=UTF-8"

const app = new Vue({
  el: "#app",
  data: {},
  mounted() {
    this.postRequest()
  },
  methods: {
    postRequest() {
      axios({
          method: 'post',
          url: 'https://jsonplaceholder.typicode.com/posts',
          params: {
            user_key_id: 'USER_KEY_ID',
          },
          data: {
            title: 'new_title',
            body: 'new_body',
            userId: 'userid'
          },
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          }
        })
        .then(function(response) {
          console.log('Ответ сервера успешно получен!');
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div id="app"></div>

и для application/x-www-form-urlencoded

При application/x-www-form-urlencoded: значения кодируются в кортежах с ключом, разделенных символом '&', с '=' между ключом и значением. Т.е. при application/x-www-form-urlencoded в data нужно передать строку формата:

data2=1&data3=2

Более подробно можно почитать по ссылке XMLHttpRequest POST, формы и кодировка

Привожу пример ниже:

const app = new Vue({
  el: "#app",
  data: {},
  mounted() {
    this.postRequest()
  },
  methods: {
    postRequest() {
      axios({
          method: 'post',
          url: 'https://jsonplaceholder.typicode.com/posts',
          params: {
            user_key_id: 'USER_KEY_ID',
            action: 'tracking.data_save',
            key_id: 'KEY_ID'
          },
          data: `data2=${encodeURIComponent('1')}`,
          headers: {
            "Content-type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(response) {
          console.log('Ответ сервера успешно получен!');
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div id="app"></div>

БЛОГ НА HUSL

Axios. Как отправить данные через Post?

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