ReactJS AJAX调用提交表单数据PHP端未接收返回失败如何解决

• 你当前使用的fetch默认发起GET请求，没有携带任何表单数据
• 没有指定请求头Content-Type: application/json，也没有将表单序列化为JSON提交到服务端，导致PHP读取php://input为空，解析后返回false，触发失败逻辑

只需要修改React代码中的handleFormSubmit方法即可，修改后的代码如下：

handleFormSubmit(event){
  event.preventDefault();
  // 构造提交的表单数据
  const postData = {
    Name: this.state.Name,
    Class: this.state.Class
  };
  fetch(API_PATH, {
    method: 'POST', // 指定POST请求
    headers: {
      'Content-Type': 'application/json' // 声明提交的是JSON格式
    },
    body: JSON.stringify(postData) // 把表单数据序列化为JSON
  })
  .then(response => response.json()) // 先解析响应为JSON格式
  .then(data => console.log(data)) // 打印返回结果，此时就能拿到{"status":"Success"}
  .catch(err => console.error('请求出错：', err));
}

如果需要防止空表单提交，可以在提交前增加数据校验逻辑：

if(!postData.Name.trim() || !postData.Class.trim()){
  alert('姓名和班级不能为空');
  return;
}

修复后提交表单即可得到成功响应。

内容的提问来源于stack exchange，提问作者Mr. CLOWN