详解vue axios用post提交的数据格式

下面是详解vue axios用post提交的数据格式的完整攻略。

一、为什么要使用post方式提交数据

在前端应用中，常常需要向后台服务器提交数据。其中最常见的方式是使用GET和POST两种方式中的一种。GET方式将数据以键值对的形式放在URL的后面传递，而POST方式将数据放在请求体中传递。相比较而言，POST方式传输的数据更加隐蔽，更加安全。

二、如何用axios实现post方式提交数据

Axios是一个基于Promise用于浏览器和node.js的HTTP客户端，它能够与Promise链接起来使用。在Vue.js项目中，使用Axios发送Ajax请求是非常方便的。

1.安装Axios

可以通过NPM或者Yarn来安装Axios。

npm install axios

或者

yarn add axios

2.在Vue.js项目中使用Axios

接下来需要在Vue.js项目中使用Axios，可以在main.js中导入Axios，并使用Vue的原型属性进行全局注册。

import axios from 'axios'
Vue.prototype.$http = axios

3.发送POST请求

使用Axios发送POST请求是非常简单的，只需要设置URL和数据，然后使用Axios的post方法进行发送即可。以下是一个例子：

this.$http.post('/api/someData', {
  data1: 'some data1',
  data2: 'some data2',
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

三、POST请求的数据格式

在发送POST请求时，需要了解POST请求的数据格式。常用的POST数据格式有以下几种：

1. application/json

JSON格式是一种轻量级的数据交换格式，易于阅读和编写。在Axios中使用JSON格式发送POST请求非常简单，只需将需要发送的数据转换为JSON格式，并将Content-Type设置为application/json即可。

const data = {
  name: 'Alice',
  age: 18,
};
const config = {
  headers: {
    'Content-Type': 'application/json'
  }
};
this.$http.post('/api/someData', data, config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

2. application/x-www-form-urlencoded

这是最基本的POST请求数据格式。在使用此格式时，数据将被格式化为类似key1=value1&key2=value2的形式，发送到服务器。在Axios中使用该格式发送POST请求非常简单，只需将需要发送的数据转换为FormData对象，并将Content-Type设置为application/x-www-form-urlencoded即可。

const data = new FormData();
data.append('name', 'Alice');
data.append('age', '18');
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
};
this.$http.post('/api/someData', data, config)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

四、小结

本文简单介绍了在Vue.js项目中使用Axios实现POST方式提交数据的方法，并且介绍了两种POST请求数据格式：application/json和application/x-www-form-urlencoded。根据实际需求，可以选择适合自己的数据格式。