通过reactjs-axios将数据POST到php文件

Question

我正试图将数据发布到一个php文件中，该文件比.js文件高两个文件级别。我是reactjs的新手，对axios并不完全熟悉，所以请耐心等待。

ReactJS代码

onSubmit=(e)=>{
e.preventDefault();
alert(this.state.username);
axios.post('../../connections/submit.php',{
username:this.state.username
}).then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
};

有问题的PHP文件：

if(isset($_POST) && !empty($_POST)){
$data = json_decode(file_get_contents("php://input"), true);
$username = $data['username'];
print_r($username);
$conn=mysqli_connect("localhost","root","","jwt_test");
$sqlOrder="INSERT INTO user(u_id,username) VALUES(NULL,'$username')";
$conn->query($sqlOrder);
$conn->close;
};

这是公布数据的正确方式吗？我返回了一个404错误代码，说明它找不到我的文件。

我的文件结构如下：

-connections
-submit.php
-src
-components
-submit.js

如果有帮助的话，我在submit.js文件中导入了axios，而不是App.js文件。任何建议都将不胜感激。感谢阅读。

Answer 1

我已经开始工作了。对于reactjs文件，这是代码：

onSubmit=(e)=>{
e.preventDefault();
alert(this.state.username);
//!!! need to stringify the payload before sending it to phpmyadmin.
var payload = {
username:this.state.username
};
axios.post('http://localhost/connections/submit.php',
JSON.stringify(payload)).then(res=>{
console.log(res);
}).catch(error=>{
console.log(error);
});
};

接收的PHP文件：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
if(isset($_POST) && !empty($_POST)){
$data = json_decode(file_get_contents("php://input"), true);
$username = $data['username'];
$conn=mysqli_connect("localhost","root","","jwt_test");
$stmt = $conn->prepare("INSERT INTO user(u_id,username) VALUES(NULL,?)");
$stmt->bind_param('s',$username);
$stmt->execute();
$conn->close;
};

需要的是PHP文件中的两个头，用JSON编码有效载荷，并使用另一个服务器接收有效载荷，在这种情况下，使用XAMPP。