为何fetch函数提交数据后PHP端无法获取值？

现象 #

前端通过Fetch API提交表单数据，控制台能正常打印输入值，但PHP端使用$_POST获取字段时，出现如下错误：

Notice: Undefined index: name in C:\laragon\www\validator.php on line 4
Notice: Undefined index: email in C:\laragon\www\validator.php on line 5
Notice: Undefined index: amount in C:\laragon\www\validator.php on line 6
Please enter a valid email

前端原代码 #

form.addEventListener('submit', (e) => {
    e.preventDefault();
    var name = nameInput.value;
    var email = emailInput.value;
    var amount = amountInput.value;
    console.log(name);
    let data = {
        name : name,
        email : email,
        amount : amount,
    }
    fetch('validator.php', {
        method : 'POST',
        body : JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
    }).then(function(response) {
        return response.text();
    }).then(function(text) {
        console.log(text);
    }).catch(function(error){
        console.error(error);
    })
});

PHP原代码 #

<?php
    // User data to be displayed later
    $name = $_POST["name"];
    $email = $_POST["email"];
    $amount = $_POST["amount"];
    // Check for email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      echo "Please enter a valid email";
    }
    // JSON array
    $info = array($name,$email,$amount);
    json_encode($info);
?>

HTML表单代码 #

<form action="validation.php" method="POST" class="text-center" id="form">
    <label for="name" class="form-label" style="color: #1D1C52; font-weight: bold;">Name</label>
    <div class="mb-4 w-50">
        <input
          type="name"
          id="name"
          name="name"
          class="form-control input-field"
          required
        />
 
      </div>
      <label for="email" class="form-label" style="color: #1D1C52; font-weight: bold;">Email</label>
      <div class="mb-4 w-50">
        <input
          type="email"
          id="email"
          name="email"
          class="form-control input-field"
          required
        />

      </div>
      <label for="amount" class="form-label" style="color: #1D1C52; font-weight: bold;">Amount</label>
      <div class="mb-4 w-50">
        <input
          type="number"
          id="amount"
          name="amount"
          class="form-control input-field"
          required
        />
      </div>

    <div class="container text-center">
    <div class="row gx-0">
    <div class="col-6 ps-5">
        <div class="clear-btn text-muted" id="clearButton">Clear fields</div>
    </div>
    <div class="col-5 pe-5 ps-4">
        <button type="submit" class="btn" style="color: white; background-color: #1D1C52;" id="submitButton">Submit</button>
    </div>

    </div>                  
  </form>

问题原因 #

PHP的$_POST超全局变量只会自动解析application/x-www-form-urlencoded（表单默认格式）或multipart/form-data格式的请求体。而当前前端发送的是application/json格式的数据，PHP不会自动将其解析到$_POST中，直接访问$_POST["name"]这类字段就会报Undefined index错误。

解决方案 #

两种可行方案，任选其一即可：

方案1：PHP端读取原始JSON数据并解析 #

修改PHP代码，直接读取请求的原始输入，解析成数组后再使用：

<?php
    // 读取原始JSON请求体并解析为关联数组
    $rawData = file_get_contents('php://input');
    $data = json_decode($rawData, true);

    // 使用空合并运算符避免字段不存在时报错
    $name = $data['name'] ?? '';
    $email = $data['email'] ?? '';
    $amount = $data['amount'] ?? '';

    // 邮箱格式验证
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      echo "请输入有效的邮箱地址";
    }

    // 生成并输出JSON数组（原代码未输出，需添加echo返回给前端）
    $info = array($name,$email,$amount);
    echo json_encode($info);
?>

方案2：前端改用FormData格式提交数据 #

修改前端Fetch代码，使用FormData提交（和普通表单提交格式一致），PHP可直接用$_POST获取：

form.addEventListener('submit', (e) => {
    e.preventDefault();
    // 直接从表单创建FormData，无需手动获取每个输入值
    let data = new FormData(form);
    
    fetch('validator.php', {
        method : 'POST',
        body : data
        // 无需手动设置Content-Type，浏览器会自动处理
    }).then(function(response) {
        return response.text();
    }).then(function(text) {
        console.log(text);
    }).catch(function(error){
        console.error(error);
    })
});

这种方式更简洁，还能自动兼容文件上传场景，PHP端无需修改即可正常工作。

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