Angular2: Send data to MySQL with php file

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

WARNING: When using PDO you should be using prepared statements with placeholder values and supply any user data only as arguments on execute . In this code you have potentially severe SQL injection bugs. Refer to PHP The Right Way for advice on how to avoid problem like this. — tadman
– tadman, Commented Mar 20, 2017 at 16:29

AVJT82 · Accepted Answer · 2017-03-20 18:00:50Z

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

Collectives™ on Stack Overflow

Angular2: Send data to MySQL with php file

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