Vue项目中axios POST提交的参数PHP无法接收如何解决？

现有代码的错误点 #

• Vue的data属性拼写错误：customrName少了字母e，和input绑定的customerName不一致，取到的值始终为空
• axios传参格式错误：将FormData实例包在{form}对象中提交，参数结构不符合后端接收要求
• PHP侧参数键名不匹配：前端传参键名为驼峰格式customerName，PHP使用下划线格式customer_name取值，无法匹配到对应参数
• PHP语法错误：header声明行缺少右括号，会提前触发服务端语法报错

修复后代码 #

前端Vue代码 #

<div id="app">
  <input type="text" v-model="customerName" placeholder="Enter customer first name">
  <button type="button" @click="buttonClicked()">
    点击
  </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
  el: "#app",
  data: {
    // 修复拼写错误
    customerName : '',
  },
  methods: {
    buttonClicked(){
      var form = new FormData();
      form.append('customerName', this.customerName);
      // 直接传递FormData实例，不要嵌套在对象中
      axios.post('替换为你的PHP接口地址', form)
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
})
</script>

后端PHP代码（适配FormData传参） #

<?php
// 修复语法错误，补全右括号
header("Content-type: application/json");
// FormData格式的传参直接通过$_POST读取，键名和前端保持一致
$CustomerName = $_POST['customerName'];
echo json_encode($CustomerName);
?>

可选：JSON格式传参方案 #

如果不需要传递文件等复杂数据，也可以直接用JSON格式传参，不需要用到FormData：

前端传参写法

axios.post('替换为你的PHP接口地址', {
  customerName: this.customerName
})

对应PHP接收代码

<?php
header("Content-type: application/json");
$data = json_decode(file_get_contents("php://input"), TRUE);
// 键名和前端传的参数保持一致
$CustomerName = $data['customerName'];
echo json_encode($CustomerName);
?>

内容的提问来源于stack exchange，提问作者Yahoo