Angular4 ng提交表格数据到PHP文件

Question

I am trying to set a CRUD system with Angular4 and MySQL and PHP, for that i create a service file tables.service.ts

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class TablesService {

constructor(private http: Http) {
}
 // get table content
getTableContent() {
return this.http.get('http://localhost/Backend/tables.php')
    .map(res => res.json()
    );
 }
// post data to table
postTableContent(contents: any[]) {
  const headers = new Headers({'Content-Type': 'application/json'});
  console.log('form data \n' + JSON.stringify(contents));
  return this.http.post('http://localhost/Backend/postData.php',
      JSON.stringify(contents),
      {headers: headers}
   );
 }
}

And in my table.ts file i subscribed to this service:

import {Component, OnInit, ViewChild, ViewEncapsulation} from 
 '@angular/core';
 import {TablesService} from '../../../services/tables.service';
 import {NgForm} from '@angular/forms';

 @Component({
 selector: 'app-table-choisie',
 templateUrl: './table-choisie.component.html',
 styleUrls: ['./table-choisie.component.css'],
 encapsulation: ViewEncapsulation.None
})
export class TableChoisieComponent implements OnInit {
 tableContents: any[];
 @ViewChild('f') signupForm: NgForm;

constructor(private tableContentsS: TablesService) { }

ngOnInit() {
// afficher le contenue d'une table
this.tableContentsS.getTableContent()
    .subscribe(
        (tableContents) => {
          console.log(tableContents);
          this.tableContents = tableContents;
        },
        (error) => console.log('Error ' + error)
    );
 }

// on submit
onSubmit(form: NgForm) {
    this.tableContentsS.postTableContent(form.value)
        .subscribe(
            (formContents) => console.log('Form Contents'+formContents),
            (error) => console.log(error)
        );
    // print form values to the console
    // console.log(JSON.stringify(form.value));
    this.signupForm.reset();
     }

  }

The Get method working fine, but i have difficulties in sending data to the server with the post method, i searched a lot and i did not find the right way to do that.

My postData.php file:

<?php   

 header('Access-Control-Allow-Origin:*');
 header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-
 Token');
 include('connexion.php');

 $data = file_get_contents("php://input");
 echo json_decode($data);
 ?>

And when i submit my form i have this output:

I am really blocked and i dont know how to proceed

Thanks alot

Answer 1

try this

postTableContent(contents: any[]) {

  let formData:FormData = new FormData();

   formData.append('data', JSON.stringify(data));

  const headers = new Headers({'Content-Type': 'application/json'});
  console.log('form data \n' + JSON.stringify(contents));
  return this.http.post('http://localhost/Backend/postData.php',formData,{headers: headers});
 }
}

and in your php

<?php   

 header('Access-Control-Allow-Origin:*');
 header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-
 Token');
 include('connexion.php');

 echo json_encode($_POST);
 ?>

Answer 2

I put this code in my php file:

<?php  
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods: PUT, GET, POST, OPTIONS ");
header("Access-Control-Allow-Headers: Origin, X-Requested-Width, Content-
Type, Accept");
 //*************** */
include('connexion.php');

$data = json_decode(file_get_contents('php://input'), true);
$statement = $pdo->prepare( "INSERT INTO users (firstName, lastName) 
VALUES (:fname, :lname)");
$statement->bindParam('fname', $fname);
$statement->bindParam('lname', $lname);
$result = $statement->execute();
?>

in my post-user file:

addUser(fname: string, lname: string) {
if (this.mysqlService.addMysqlUserData(fname, lname)) {
  alert('Data Inserted Successfully');
  this.mysqlService.newDataAdded.emit('yes');
}

}

and in post-user html file:

<div class="form-group row">
<label class="col-sm-2" for="fname">First Name</label>
<div class="col-sm-10">
    <input type="text" class="form-control" id="fname" #fname 
     placeholder="first name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2" for="lname">Last Name</label>
<div class="col-sm-10">
    <input type="text" class="form-control col-sm-8" id="lname" #lname 
 placeholder="last name">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
    <button class="btn btn-primary" (click)="addUser(fname.value, 
 lname.value)">Add user</button>
</div>
</div>

And it works fine. Thanks a lot for your answers regard gr