Nothing in $_POST (Http request / Angular / PHP)

I'm stuck with a simple issue, but I did not find any answer on Web. So, here is my code

const URL = 'http://(...)/scripts/Fiabilisation_Unique.php';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type: application/json'
'reportProgress': 'true'
})
(...)
onClickAdresse(f : NgForm){
var adresse : Adresse= (f.value);
console.log(adresse); //{adresse : "just a french adresse"}
this.http.post(URL, adresse, httpOptions).subscribe(
(event) => {
this.temp=(event); // handle event here
},
() => {
console.log("Observable done ! ");
}
);
}


But in my file 'Fiabilisation_Unique.php", when I try a simple : print_r($_POST); it prints me : Array(
)

print_r($_POST);

Array(
)

I am pretty sure that my problem is not that complicate but I just don't figure out what is the issue. I also know that answer should not be that far but...

Thank you in advance :)

this.temp= event
– Sachila Ranawaka
Jun 29 at 8:59

Yes, but it does not change anything to my problem :)
– Timothé Bernard
Jun 29 at 9:05

can you post the tempate of your form please ?
– Pierre Mallet
Jun 29 at 9:06

<form #Adresse="ngForm" (ngSubmit)="onClickAdresse(Adresse)"novalidate> <mat-form-field > <input matInput required maxlength ="150" ngModel #adresse="ngModel" name="adresse" id="adresse" placeholder="Adresse"> <mat-form-field> <br/> <button mat-raised-button color="primary" [disabled]=!Adresse.valid>Lancer l'éligibilité</button> </form>
– Timothé Bernard
Jun 29 at 9:08

<form #Adresse="ngForm" (ngSubmit)="onClickAdresse(Adresse)"novalidate> <mat-form-field > <input matInput required maxlength ="150" ngModel #adresse="ngModel" name="adresse" id="adresse" placeholder="Adresse"> <mat-form-field> <br/> <button mat-raised-button color="primary" [disabled]=!Adresse.valid>Lancer l'éligibilité</button> </form>

Are you sure post returns something ?, it's a best practice, but not always done. Some webapi return the new object, some return the id, some return de url. What does console.log( event ) report ?
– wFitz
Jun 29 at 9:09

2 Answers
2

Your HttpOptions are not correct. Wrong quotation and reportProgress is misplaced:

HttpOptions

const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
},
reportProgress: true
});


But if you enable the reportProgress, the subscribe will receive multiple events from HttpEventType.Sent to HttpEventType.Done. But I guess that is what you want :)

reportProgress

HttpEventType.Sent

HttpEventType.Done

Ok so now the response of console.log(event) is : {type: 0} {type: 1, loaded: 31, total: 31} HttpHeaderResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "xxx/scripts/Fiabilisation_Unique.php", ok: true, …}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}ok: truestatus: 200statusText: "OK"type: 2url: "http://(...)/scripts/Fiabilisation_Unique.php"proto: HttpResponseBase {type: 3, loaded: 1312, total: 1312}
– Timothé Bernard
Jun 29 at 9:23

Ok Everyone, I finally found the answer. As expected, It was really easy.

I just add a $angularJSData = json_decode(file_get_contents("php://input"));
in my PHP code.

$angularJSData = json_decode(file_get_contents("php://input"));


Thanks everyone !

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.