vue配置axios实现POST请求后台php_vue axios.post php-优快云博客

本文链接：https://blog.youkuaiyun.com/u011295864/article/details/88565512

本文详细介绍了如何在前端使用Axios库与后端PHP进行数据交互。通过安装axios和qs库，配置axios的请求超时、请求头，并设置请求拦截器对POST数据进行序列化，实现与PHP后端的有效通信。文章提供了完整的代码示例，包括前端的axios请求和后端的PHP数据接收处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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、前端打印结果。