react.js using axios to post data to php, but php echo empty

Question

I am using react.js, axios, and PHP to post data to MySQL database

This is my react.js code

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

And this is my PHP code

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

?>

And this is my Chrome Console

Connected successfully yayayathe post after this[]

I don't know why my PHP get empty data and echo empty value.

Austin Greco · Accepted Answer · 2017-09-18 09:05:45Z

5

According to the axios docs

By default, axios serializes JavaScript objects to JSON.

One option is to read json from the body in your PHP code:

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

Then there's no need to wrap your data in FormData, you can just add it directly:

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

Another option is to set the Content-type header in axios:

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

Option 1 seems better to me though

answered Sep 18, 2017 at 9:05

Austin Greco

33.6k6 gold badges60 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zak Chen Over a year ago

I use option 1, but it also console Connected successfully yayaya[]

Artem Mirchenko · Accepted Answer · 2017-09-18 08:53:02Z

1

Try to take json from phpinput it is halpfull for me:

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

answered Sep 18, 2017 at 8:53

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

2 Comments

Zak Chen Over a year ago

Thank for your answer but my chrome Console me Connected successfully yayaya{"name":"jessie"} Notice: Array to string conversion in /Applications/XAMPP/xamppfiles/htdocs/foodMaster/build/sendData.php on line 17 Array[] not all data been echo

Artem Mirchenko Over a year ago

@ZakChen ok, good, now try to debug input data, and echo some variants with json_decode and not, you need to take json string and then decode it

user3737430 · Accepted Answer · 2017-12-13 11:34:35Z

Don't use hack, make proper code for your project.

First of all install this qs node package in your project. Then you can you stringify your data using this function and submit data to the server.

axios already clear that issue on its documentation file. You can check using-applicationx-www-form-urlencoded-format link for more info.

Whatever is use the easy way to resolve this issue in my scenario, here is my code:

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

then you PHP server show proper global data like as below:

Array
(
    [command] => userLogin
    [email] => [email protected]
    [password] => af12548@$
)

Collectives™ on Stack Overflow

react.js using axios to post data to php, but php echo empty

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related