通过reactjs axios将数据发布到php文件

时间:2020-04-18 04:39:44

标签: reactjs axios

我正在尝试将数据发布到比.js文件高两个文件级别的php文件。我是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

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

1 个答案:

答案 0 :(得分:0)

我已经做好了。对于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。