1

I am not able to give post request using axios in react while i am giving post request to my php server and wanted to insert data in mysql fetched by post request. this is my code.

const url = "http://localhost:80/react-backenda/";
const axios = require('axios');
axios.post(url, { 
  SendBy: 'username', 
  Sendto: 'got_name', 
  Msg: 'input'
})
.then(res=> console.log(res.data))
.catch(err => console.log(err));

i am getting this in my console:

Notice: Undefined index: Msg in C:\xampp\htdocs\react-backenda\index.php on line 10

Notice: Undefined index: Sendby in C:\xampp\htdocs\react-backenda\index.php on line 11

Notice: Undefined index: Sendto in C:\xampp\htdocs\react-backenda\index.php on line 12
done

this is my php script:

    <?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "msg-clone";
$conn = mysqli_connect($servername, $username, $password, $database);
if(!$conn){
    die("could not connect to server!");
}
$recText = $_POST['Msg'];
$sendby = $_POST['Sendby'];
$sendto = $_POST['Sendto'];
     echo $recText;
     $sql = "INSERT INTO `messages` (`id`, `text`, `sendby`, `sendto`, `time`) VALUES (NULL, '$recText', '$sendby', '$sendto', current_timestamp());";
     $res = mysqli_query($conn, $sql);
     if ($res){
         echo "done";
     }else {
         echo "err";
     }
?>

help to solve this issue.

4

1 Answer 1

2

By default, Axios serializes your object to JSON. It means that you'll have to receive it as a JSON in you PHP backend, or config your axios instance to send it as a form data as a browser would on a simple form.

To receive it as JSON on PHP you would do it like this:

$data = json_decode(file_get_contents('php://input'), true);

$recText = $data['Msg'];
$sendby = $data['Sendby'];
$sendto = $data['Sendto'];

But if you want to handle it on frontend, it would be something like this:

var formData = new FormData();
formData.append("SendBy", "username");
formData.append("Sendto", "got_name");
formData.append("Msg", "input");

axios.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Note: As Dharman kindly warned you, your backend code has seriously security problems related to SQL Injection, it would also be nice to isolate your connection and query handling em separate Classes/Files. If you're developing a production application or even just learning, pay attention to those details, there are also some beginner's friend frameworks that allow you to easily create a good structure for small or bigger projects like Laravel.

Samples:

2
  • thanks for your ans, i am a learner and student, i will surely try to improve myself. Commented Sep 5, 2020 at 18:24
  • You're welcome. Go ahead we all are always improving ourselves (: feel free to post any question that you may have.
    – R. Zanel
    Commented Sep 5, 2020 at 18:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.