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.

score 3 · Answer 1 · answered Sep 18 '17 at 09:05

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

I use option 1, but it also console Connected successfully yayaya[] — Zak Chen, Sep 18 '17 at 09:22

score 1 · Answer 2 · answered Sep 18 '17 at 08:53

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 '17 at 08:53

Artem Mirchenko

2,140
1
9
21

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 – Zak Chen Sep 18 '17 at 09:05
@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 – Artem Mirchenko Sep 18 '17 at 09:47

score 1 · Answer 3 · answered Dec 13 '17 at 11:34

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] => asdf@test.com
    [password] => af12548@$
)

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

3 Answers3

Related