axios提交post json 数组数据 axios json参数

需求

在Vue.js的框架中，如果要发送ajax请求是需要借助外部库的。在vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios，或者也可以使用jquery来发送ajax请求。

那么本篇章主要来介绍使用axios库来发送ajax请求。

axios介绍

「Github仓库」: https://github.com/axios/axios

「中文文档」: http://www.axios-js.com/zh-cn/docs/

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装axios

Using npm:

$ npm install axios

$ npm install axios

Using bower:

$ bower install axios

$ bower install axios

Using yarn:

$ yarn add axios

$ yarn add axios

Using jsDelivr CDN:

Using unpkg CDN:

可以从上面看到，安装axios可以使用以上的5种方式。那么下面我将使用CDN的js引入方式，来写一个示例代码。

基本使用示例

1.说明

测试验证发送ajax请求，首先需要一个接收ajax的后台服务，在这里我写了一个flask的后台服务。

在前端我则使用js的引入方式编写axios示例，发送get以及post请求。

那么其中post请求主要常用有两种，如下：

• 一种是form请求格式
• 一种是json格式

2.flask的后台服务代码

from flask import Flask, jsonify, request, make_response
import json

# 实例化app
app = Flask(import_name=__name__)

# 定义全局列表数据变量
data_list = [
    {'id': 1, 'Name': '奔驰', 'Ctime': '2020-01-21 21:25:44'},
    {'id': 2, 'Name': '宝马', 'Ctime': '2020-01-20 21:25:44'},
    {'id': 3, 'Name': '法拉利', 'Ctime': '2020-01-19 11:25:44'},
    {'id': 4, 'Name': '丰田', 'Ctime': '2020-01-18 13:25:44'},
    {'id': 5, 'Name': '特斯拉', 'Ctime': '2020-01-17 15:25:44'},
]


# 删除列表数据
@app.route('/del_list', methods=["POST"])
def del_list():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "删除成功",
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
    id = request.form.get('id')
    print('id = %s' % (id))

# 请求数据异常，则返回失败
if id is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "删除失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
        res.status = '401'  # 设置状态码
return res

# 将根据id删除列表list中的数据
for i in range(0, len(data_list) - 1):
        item = data_list[i]

if item['id'] == int(id):
            data_list.pop(i)  # 删除数据

# 返回json数据
return res


# 添加列表数据 json格式
@app.route('/add_list_json', methods=["POST"])
def add_list_json():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "添加成功",
'data': "json"
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收处理json数据请求
    data = json.loads(request.data)  # 将json字符串转为dict
    id = data['id']
    name = data['name']
    print('id = %s, name = %s' % (id, name))

# 请求数据异常，则返回失败
if name is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "添加失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
return res

# 将数据加入到列表list中
    data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 添加列表数据 form表单
@app.route('/add_list_form', methods=["POST"])
def add_list_form():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "添加成功",
'data': "form"
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
    id = request.form.get('id')
    name = request.form.get('name')
    print('id = %s, name = %s' % (id, name))

# 请求数据异常，则返回失败
if name is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "添加失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
return res

# 将数据加入到列表list中
    data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 获取列表数据
@app.route('/get_list', methods=["GET"])
def get_list():
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': data_list,
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
return res


if __name__ == '__main__':
    app.run(debug=True)

from flask import Flask, jsonify, request, make_response
import json

# 实例化app
app = Flask(import_name=__name__)

# 定义全局列表数据变量
data_list = [
    {'id': 1, 'Name': '奔驰', 'Ctime': '2020-01-21 21:25:44'},
    {'id': 2, 'Name': '宝马', 'Ctime': '2020-01-20 21:25:44'},
    {'id': 3, 'Name': '法拉利', 'Ctime': '2020-01-19 11:25:44'},
    {'id': 4, 'Name': '丰田', 'Ctime': '2020-01-18 13:25:44'},
    {'id': 5, 'Name': '特斯拉', 'Ctime': '2020-01-17 15:25:44'},
]


# 删除列表数据
@app.route('/del_list', methods=["POST"])
def del_list():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "删除成功",
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
    id = request.form.get('id')
    print('id = %s' % (id))

# 请求数据异常，则返回失败
if id is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "删除失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
        res.status = '401'  # 设置状态码
return res

# 将根据id删除列表list中的数据
for i in range(0, len(data_list) - 1):
        item = data_list[i]

if item['id'] == int(id):
            data_list.pop(i)  # 删除数据

# 返回json数据
return res


# 添加列表数据 json格式
@app.route('/add_list_json', methods=["POST"])
def add_list_json():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "添加成功",
'data': "json"
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收处理json数据请求
    data = json.loads(request.data)  # 将json字符串转为dict
    id = data['id']
    name = data['name']
    print('id = %s, name = %s' % (id, name))

# 请求数据异常，则返回失败
if name is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "添加失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
return res

# 将数据加入到列表list中
    data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 添加列表数据 form表单
@app.route('/add_list_form', methods=["POST"])
def add_list_form():
# 设置返回数据
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': "添加成功",
'data': "form"
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'

# 接收post请求的form参数
    id = request.form.get('id')
    name = request.form.get('name')
    print('id = %s, name = %s' % (id, name))

# 请求数据异常，则返回失败
if name is None:
        data = {
'status': 1,  # 0请求成功 1请求失败
'messages': "添加失败",
        }
        res = make_response(jsonify(data))  # 设置响应体
return res

# 将数据加入到列表list中
    data_list.append({'id': id, 'Name': name, 'Ctime': '2020-01-17 15:25:44'})

# 返回json数据
return res


# 获取列表数据
@app.route('/get_list', methods=["GET"])
def get_list():
    data = {
'status': 0,  # 0请求成功 1请求失败
'messages': data_list,
    }

    res = make_response(jsonify(data))  # 设置响应体
    res.status = '200'  # 设置状态码
    res.headers['Access-Control-Allow-Origin'] = "*"  # 设置允许跨域
    res.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
return res


if __name__ == '__main__':
    app.run(debug=True)

该后台服务我提供了4个请求：查询列表数据、添加列表数据(json/form)、删除列表数据。使用postman分别测试如下：

• 查询列表数据

image-20200225144337145

• 添加列表数据form

image-20200225163953591

• 添加列表的数据json

image-20200225164032846

• 删除列表数据

image-20200225144503508

好了，经过测试，后台的4个api接口都可以用了。那么下面来看看如何使用axios发出请求。

3.在前端使用axios发送请求

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>

<script src="lib/vue.js">script>

<script src="lib/axios/axios.min.js">script>

head>
<body>

<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求form" @click="postInfoForm">
<input type="button" value="post请求json" @click="postInfoJson">
div>

<script>// 2. 创建一个Vue的实例var vm = new Vue({el: '#app',data: {
					show() {console.log('调用show方法');
					},
				},methods: {
					getInfo() { // 发起get请求
						axios.get('http://127.0.0.1:5000/get_list')
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
					postInfoForm() { // 发起 post 请求   application/x-wwww-form-urlencoded// 发送 POST 请求
						axios({method: 'post',url: 'http://127.0.0.1:5000/add_list_form',data: {id: '6',name: '福特'
								},// 设置 transformRequest 和 headers 是兼容发送form表单格式的请求transformRequest: [function(data) {// Do whatever you want to transform the datalet ret = '';for (let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}return ret
								}],headers: {'Content-Type': 'application/x-www-form-urlencoded',
								}
							})
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
					postInfoJson() { // 发起 post 请求   jsonvar data = {"id": '7',"name": '福特'
						};// 在这里要注意，尽管flask接收的格式为json，并且设置了跨域处理，使用axios还是不能直接使用json发送请求// 需要将请求体还为 json格式的字符串，然后 headers 设置为 text/plain 才可以正常发送请求。
						axios({method: 'post',url: 'http://127.0.0.1:5000/add_list_json',data: JSON.stringify(data),headers: {'Content-Type': 'text/plain', 
								}
							})
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
				},
			});script>

body>
html>

span style="line-height: 26px;">html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>

<script src="lib/vue.js">script>

<script src="lib/axios/axios.min.js">script>

head>
<body>

<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求form" @click="postInfoForm">
<input type="button" value="post请求json" @click="postInfoJson">
div>

<script>// 2. 创建一个Vue的实例var vm = new Vue({el: '#app',data: {
					show() {console.log('调用show方法');
					},
				},methods: {
					getInfo() { // 发起get请求
						axios.get('http://127.0.0.1:5000/get_list')
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
					postInfoForm() { // 发起 post 请求   application/x-wwww-form-urlencoded// 发送 POST 请求
						axios({method: 'post',url: 'http://127.0.0.1:5000/add_list_form',data: {id: '6',name: '福特'
								},// 设置 transformRequest 和 headers 是兼容发送form表单格式的请求transformRequest: [function(data) {// Do whatever you want to transform the datalet ret = '';for (let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}return ret
								}],headers: {'Content-Type': 'application/x-www-form-urlencoded',
								}
							})
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
					postInfoJson() { // 发起 post 请求   jsonvar data = {"id": '7',"name": '福特'
						};// 在这里要注意，尽管flask接收的格式为json，并且设置了跨域处理，使用axios还是不能直接使用json发送请求// 需要将请求体还为 json格式的字符串，然后 headers 设置为 text/plain 才可以正常发送请求。
						axios({method: 'post',url: 'http://127.0.0.1:5000/add_list_json',data: JSON.stringify(data),headers: {'Content-Type': 'text/plain', 
								}
							})
							.then(function(response) {console.log(response);
							})
							.catch(function(error) {console.log(error);
							});
					},
				},
			});script>

body>
html>

4.在网页端查看发送的请求效果

4.1 发送get请求

image-20200226104958385

4.2 发送form格式的post请求

image-20200226105044299

4.3 发送json格式的post请求

image-20200226105200482

在上面看到已经能够正常接收请求返回的信息了，那么下面将逐个请求的具体内容显示出来。

5.打印请求的返回内容

5.1 打印get请求的返回内容

image-20200226114606114

getInfo() { // 发起get请求

						axios.get('http://127.0.0.1:5000/get_list')
							.then(function(response) {
console.log(response);
// 打印 data 数据
console.log(response.data.messages);
// 打印 status 数据
console.log(`status = ${response.status}`,);
							})
							.catch(function(error) {
console.log(error);
							});

					},

					getInfo() { // 发起get请求

						axios.get('http://127.0.0.1:5000/get_list')
							.then(function(response) {
console.log(response);
// 打印 data 数据
console.log(response.data.messages);
// 打印 status 数据
console.log(`status = ${response.status}`,);
							})
							.catch(function(error) {
console.log(error);
							});

					},

浏览器执行如下：

image-20200226114653656

5.2 打印form格式post请求的返回内容

image-20200226114926936

浏览器执行如下：

image-20200226115002933

5.3 打印json格式post请求的返回内容

image-20200226115139318

浏览器执行如下：

image-20200226115053227

配置axios的全局参数

前面的多个请求中，我在写url的时候是这样的，如下：

axios.get('http://127.0.0.1:5000/get_list')

axios.get('http://127.0.0.1:5000/get_list')

每个请求都要带上服务的url地址「http://127.0.0.1:5000」其实挺麻烦的，这个参数可以设置为一个全局参数，不用每个接口都去写，设置如下。

6.配置axios请求的URL全局参数

image-20200226145512060

axios.defaults.baseURL = 'http://127.0.0.1:5000';

axios.defaults.baseURL = 'http://127.0.0.1:5000';

那么配置了这个根url的参数时候，其他接口只需要写后面的路径即可。

当然，axios还提供了更多的全局参数。

7.查看更多的axios全局参数

http://www.axios-js.com/zh-cn/docs/index.html

image-20200226145703554

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';