首页 > 解决方案 > 从 ajax(香草版)发送的数据不会存储在 PHP 中的 $_POST 中

问题描述

我有这个 JS 代码 ()

var obj = {
        first_name: 'cholo',
        last_name: 'yologs'
};
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("post", "recv.php"); 
xmlHttp.send(JSON.stringify(obj)); // or xmlHttp.send(obj);

和 PHP 代码recv.php

<?php
   $firstName = $_POST["first_name"];
   $lastName = $_POST["last_name"];
   echo $firstName." ".$lastName; 
?>

当我尝试运行该页面时,它显示未定义索引:(first_namelast_name)。
是否有其他方法不在PHP 中使用file_get_contents('php://input')then或在 JS 中的对象中发送数据但自动存储发送的数据?json_decode()FormData$_POST

编辑:
我也想知道为什么我不能$_POST像通过发送数据一样访问form

标签: javascriptphpajaxpost

解决方案


如果您想发送 JSON 字符串表示,您的 PHP 文件应将json_decode其转换为 StdObject:

<?php
    $json = file_get_contents('php://input');
    $data = json_decode($json);
    echo $data->first_name ." ". $data->last_name;

和 JavaScript:

const obj = {
  first_name: "cholo",
  last_name: "yologs"
};

// FETCH

fetch("recv.php", {method: 'POST', body: JSON.stringify(obj)})
  .then(res => res.text())
  .then(data => {
    console.log(data);   // "cholo yologs"
  });

否则,我建议使用 JavaScript FormData:

PHP 文件:

<?php
   $firstName = $_POST["first_name"];
   $lastName  = $_POST["last_name"];
   echo $firstName ." ". $lastName; 

JavaScript:

const obj = {
  first_name: "cholo",
  last_name: "yologs"
};

// Convert your Object literal to FormData

const FD = new FormData();
Object.entries(obj).forEach(([p, v]) => FD.append(p, v));

// XHR

const xmlHttp = new XMLHttpRequest();
xmlHttp.addEventListener("load", () => {
  if (xmlHttp.status == 200) {
    console.log(xmlHttp.responseText);   // "cholo yologs"
  } else {
    console.error("Error!");
  }
});
xmlHttp.open("post", "recv.php");
xmlHttp.send(FD); // Send the FormData

您应该最终"cholo yologs"在控制台中看到。

您可以使用 Fetch API 代替 XMLHttpRequest:

const obj = {
  first_name: "cholo",
  last_name: "yologs"
};

// Convert your Object literal to FormData

const FD = new FormData();
Object.entries(obj).forEach(([p, v]) => FD.append(p, v));

// FETCH

fetch("recv.php", {method: "POST", body: FD})
  .then(res => res.text())
  .then(data => {
    console.log(data);   // "cholo yologs"
  });

推荐阅读