主页 / 问题 / 1159061
Accepted
Mike Kharkov
Asked:2020-07-30 17:00:40 +0000 UTC2020-07-30 17:00:40 +0000 UTC

爱讯。如何通过 Post 发送数据？

  • 772

有这个代码：

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

  },

在此示例中，您可以观察到尝试通过 Post 请求向服务器发送数据（注意 `{data2: 1 }` 参数）。


在我的例子中，不是以键 - 值的形式从指定参数发送数据，而是发送以下内容：

在此处输入图像描述


问题：

1）为什么我将一个空字符串作为值传递，并将键与值一起作为参数传递？

2) 在这种情况下，是否有可能以某种方式通过 post 发送数据，使得键是值：`data2`
，并且该键的值是`1`，并且没有任何空行？

javascript

3 个回答

  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 应该来到服务器

    • 2
  2. Best Answer

    使用以下选项配置 Axios

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

    url - 将向其发出请求的 URL

    params - 将与请求一起发送的 URL 参数

    data - 将作为请求正文发送的数据。仅适用于请求方法PUT、POST、DELETE和PATCH。未设置时transformRequest，必须为以下类型之一：

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

    注意数据，其类型取决于您将发送的标题

    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, forms and encoding中找到

    我在下面举一个例子：

    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>

    • 1

  3. 可以这样发送：

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

  },
    • 0

相关问题