react.js 使用 axios 发布数据到 php，但是 php echo 为空

Posted 2023-02-22

【中文标题】react.js 使用 axios 发布数据到 php，但是 php echo 为空

【英文标题】：react.js using axios to post data to php, but php echo empty

【发布时间】：2018-02-26 17:35:41

【问题描述】：

我正在使用 react.js、axios 和 php 将数据发布到 mysql 数据库

这是我的 react.js 代码

sendData()
var data = new FormData();
data.append('name', 'jessie');
data.append('time', '12:00');
data.append('food', 'milk');
data.append('nutrition', 'vitaminA');
axios.post(
'./sendData.php',
  data: data

)
.then(response => 
console.log(response)
console.log(response.data)
this.filter = response.data
)
.catch(e => 
this.errors.push(e)
)

这是我的 PHP 代码

<?php
$servername = "127.0.0.1";
$username = "root";
$password = "";
$database = "mydb";


$conn = new mysqli($servername, $username, $password, $database);


if ($conn->connect_error) 
die("Connection failed: " . $conn->connect_error);

echo "Connected successfully yayaya";
echo "the post after this";
echo json_encode($_POST);

?>

这是我的 Chrome 控制台

Connected successfully yayayathe post after this[]

我不知道为什么我的 PHP 得到空数据并回显空值。

【参考方案1】：

根据axios docs

默认情况下，axios 将 javascript 对象序列化为 JSON。

一个选项是read json from the body in your PHP code:

$entityBody = file_get_contents('php://input');

那你的数据就不用FormData包装了，直接添加就行了：

axios.post(
'./sendData.php',
  data: 
    name: 'jessie',
    time: '12:00',
    food: 'milk',
    nutrition: 'vitaminA'
  
)

---

另一种选择是在 axios 中设置Content-type 标头：

axios.post(
  './sendData.php',
  data: data
  
    headers: 
      'Content-type': 'multipart/form-data'
    
  
)

---

选项 1 对我来说似乎更好

【讨论】：

我使用选项 1，但它也控制台连接成功 yayaya[]

【参考方案2】：

尝试从 phpinput 中获取 json，这对我来说是 halpfull：

echo file_get_contents('php://input');
echo json_decode(file_get_contents('php://input'), true);

【讨论】：

感谢您的回答，但我的 chrome 控制台我连接成功 yayaya"name":"jessie"注意： 中的数组到字符串转换/Applications/XAMPP/xamppfiles/htdocs/foodMaster/build/sendData.php 第 17 行 Array[] 并非所有数据都已回显

@ZakChen 好的，好的，现在尝试调试输入数据，并使用 json_decode 回显一些变体，而不是，您需要获取 json 字符串然后对其进行解码

【参考方案3】：

不要使用 hack，为您的项目编写正确的代码。

首先在你的项目中安装这个qs 节点包。然后你就可以使用这个函数stringify你的数据，并将数据提交到服务器。

axios 已经在其文档文件中明确了该问题。您可以查看using-applicationx-www-form-urlencoded-format 链接了解更多信息。

在我的场景中使用简单的方法来解决这个问题，这里是我的代码：

var qs = require('qs');  
var palyload = 
    'command': 'userLogin',
    "email" : this.state.email,
    "password" : this.state.password,
;
axios.post( apiBaseUrl, qs.stringify(palyload) ).then(
    function(response)
        console.log(response);
    
);

然后你的 PHP 服务器显示正确的全局数据，如下所示：

Array
(
    [command] => userLogin
    [email] => [e-mail]
    [password] => af12548@$
)