1、首先项目安装axios和qs。(具体度娘,不多说)。
2、main.js里引入axios和qs,然后配置axios。代码如下:
import axios from 'axios'
import qs from 'qs'
// axios配置
axios.defaults.timeout = 5000 // 响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 配置post请求头
axios.defaults.headers.get['Content-Type'] = 'application/json;charset=UTF-8' // 配置get请求头
axios.defaults.baseURL = 'http://localhost:11111' // 配置接口地址
// POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
// 在发送请求之前做某件事
if (config.method === 'post') {
// 这里使用qs对数据进行处理,防止后台$_POST接收不到
config.data = qs.stringify(config.data)
}
return config
}, (error) => {
console.log('错误的传参', 'fail')
return Promise.reject(error)
})
Vue.prototype.$http = axios // 定义axios的全局变量
3、前端axios请求 http://localhost:11111/index.php 文件。
let params = {
name: 'luMaster',
son: [
{
'proName': '电路板',
'index': 0
},
{
'proName': '电源',
'index': 1
}
]
}
this.$http.post('/index.php', params).then(
response => {
console.log(response)
},
err => {
console.log(err)
}).catch((error) => {
console.log(error)
})
4、后台php代码
<?php
header("Content-Type: text/html; charset=UTF-8");
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE');
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/5/22 0022
* Time: 11:48
*/
class Emp {
public $msg = "";
public $code = "";
public $data = "";
}
$e = new Emp();
$name = $_POST['name'];
$arr = $_POST['son'];
$value = '';
for ($i = 0; $i < count($arr);$i ++) {
$value .= $arr[$i]['proName'].',';
}
// 获取$value的字节数(中文字符占3个字节)
$len = strlen($value);
// 去掉最后的',',这里为什么减3呢,因为$value最后的','是中文字符的逗号,占了3个字节。
$value = substr($value, 0, $len - 3);
$message = '接收到的name为:'.$name.',接收到的son数组下proName分别为:'.$value;
$e->msg = '接口调用成功!';
$e->code = 'success';
$e->data = $message;
echo json_encode($e);
4、前端打印结果。