1

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

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`и безо всяких пустых строк?

3 ответа 3

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>

3
  • проблема заключается в том что я не могу прописать следующий заголовок: "Content-type": "application/json; charset=UTF-8" поскольку сервер у другого разработчика(серверного) отказывается принимать данные с таким заголовком(тоесть как я понимаю отказывается принимать json) А если в вашем примере поменять заголовок на тот который был прописан в моем примере - то я натыкааюсь ровно на точно такую же проблему которая описана в начале поста. 31 июл 2020 в 11:25
  • joxi.ru/EA4dWyzHpPXyOA 31 июл 2020 в 11:34
  • 1
    добавил пример для "Content-type": "application/x-www-form-urlencoded" 31 июл 2020 в 12:05
2
    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

1
  • ваше решение не рабочее - выдается ошибка. 30 июл 2020 в 10:27
0

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

            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);
        });
    },

  },
1
  • >> "Или просто перенести data2: 1 в params" На сколько я понимаю в этом случае этот параметр будет передеватся не постом а гетом? (если да - то мне это, как я указал выше - не подходит) 30 июл 2020 в 10:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.