POST data to php file via reactjs axios

Question

I am trying to post data to a php file that is two file levels higher relative to the .js file. I am new to reactjs and not entirely familiar with axios so bear with me.

ReactJS code

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);
    });
  };

The PHP file in question:

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;
};

Is this the correct way of posting the data? I am returned a 404 error code stating that it could not find my file.

My file structure is as so:

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

If it helps, I imported axios in my submit.js file instead of in the App.js file. Any advice would be much appreciated. Thanks for reading.

axios.post('../../connections/submit.php') I think this not work.. try like "localhost/yourproject/connections/submit.php" — Viduranga
– Viduranga, Commented Apr 18, 2020 at 4:58
@Viduranga, for localhost, do i do it localhost:3000? or just localhost:3000? This is the new path : localhost:3000/test/connections/submit.php — digdigdoot
– digdigdoot, Commented Apr 18, 2020 at 5:05
no no . to work php file, you need to host it on a server .. like apache. nginx.. if you test this on local machine install xampp (it include php+apache) then put your php file in that server.. then start server (normally it start like localhost ) so that hosted file url should add in axios.post( ); — Viduranga
– Viduranga, Commented Apr 18, 2020 at 5:13
okay that works, only issue now is the cross-origin error. I think I can handle that. Thanks @Viduranga — digdigdoot
– digdigdoot, Commented Apr 18, 2020 at 5:27
@Dharman, updated the code to reflect this. Thank you for the heads up. — digdigdoot
– digdigdoot, Commented Apr 19, 2020 at 2:48

digdigdoot · Accepted Answer · 2020-04-19 02:51:38Z

I've got it to work. For the reactjs file, this is the code:

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);
    });
  };

The receiving PHP file:

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;
};

What was needed were the two headers in the PHP file, encoding the payload in JSON , and using another server to receive the payload, in this case, XAMPP was used.

Collectives™ on Stack Overflow

POST data to php file via reactjs axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related