Angular2: Send data to MySQL with php file - php

Question

I am trying to set a CRUD system with Angular2 and MySQL and PHP, I can get my data with this code:
getClients(){
this.http.get('http://localhost/Angular%20tests/pr1/getClients.php')
.subscribe(res=>this.clients=res.json(),
error=> alert("Error get clients"),
()=> console.log("Get clients completed..."));
}
But for sending the data to the server, I don not understand were is my error, The first three instructions are giving the correct values of my entries.
onPersonneF(f:NgForm){
console.log(f.value);
console.log(JSON.stringify(f.value));
console.log(f.valid);
// test for the post
let headers = new Headers({'Content-Type': 'application/json'});
let options = new RequestOptions({headers: headers});
this.http.post('http://localhost/Angular%20tests/pr1/insertClient.php', JSON.stringify(f.value), options);
}
And the code of my php file is:
<?php
// for: Blocage d'une requête multi-origines (Cross-Origin Request)
header("Access-Control-Allow-Origin: *");
try {
$pdo = new PDO("mysql:host=localhost; dbname=test; char=utf8", '****', '****');
} catch (Exception $e) {
echo "Connexion Error".$e->getMessage();
}
$data = json_decode(file_get_contents("php://input"));
//var_dump($data);
echo "**************";
echo $data->nom_client;
echo "**************";
$nom_client = $data->nom_client;
$prenom_client = $data->prenom_client;
$no_order = $data->no_order;
$query = $pdo->prepare("insert into clients values(NULL,'".$nom_client."', '".$prenom_client."', '".$no_order."')");
$query->execute();
$query->closeCursor();
?>

Answer 1

Do not send it as JSON, but using URLSearchParams and headers as application/x-www-form-urlencoded instead.
onPersonneF(f:NgForm){
let body = new URLSearchParams();
// obviously set your correct parameters
body.set('myPropertyName', f.myProperty)
// the rest of data to send...
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let options = new RequestOptions({ headers: headers });
this.http.post('http://localhost/Angular%20tests/pr1/insertClient.php', body.toString(), options)
.map(res => res.json());
.subscribe(data => console.log(data)) // do subscription in component
}
Then you can reach your data in your php-file... here I simply retrurn the data. Remember to json_encode what you are returning :)
<?php
header("Access-Control-Allow-Origin: *");
$data = file_get_contents("php://input");
echo json_encode($data);
?>