CODEWITHSUNDEEP
phpangularionic2
Redzwan Latif
Redzwan Latif

Reputation: 886

Angular2 - Send POST request to server

I'm building a mobile app to display news feed. In my app, one should be able to post a status.

The status will be sent to PHP server using POST method.

Now my problem is PHP cant read the POST request I sent using angular2.

This is my code:

form.html

<form class="sample-form post-form" [formGroup]="post_form" (ngSubmit)="createStatus()">
            <ion-item>
              <ion-textarea rows="7" placeholder="What's happening?'" formControlName="status"></ion-textarea>
            </ion-item>
            <section class="form-section">
              <button ion-button block class="form-action-button create-post-button" type="submit" [disabled]="!post_form.valid">Post</button>
            </section>
          </form>

form.ts

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Validators, FormGroup, FormControl } from '@angular/forms';

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'form-page',
  templateUrl: 'form.html'
})
export class FormLayoutPage {

  section: string;

  post_form: any;

  url: string;
  headers: Headers;

  constructor(public nav: NavController, public alertCtrl: AlertController, public http: Http) {
    this.headers = new Headers();
    this.headers.append("Content-Type", "application/x-www-form-urlencoded");

    this.section = "post";


    this.post_form = new FormGroup({
      status: new FormControl('', Validators.required),
    });
  }

  createStatus(){
    console.log(this.post_form.value);

    this.url = "https://domain.com/mobileREST/poststatus.php";

    this.http.post(this.url, this.post_form.value, { headers: this.headers})
      .map(res => res.json())
      .subscribe(res => {
        console.log(res);
      },
      err => {
        console.log(err);
      })
  }
}

poststatus.php

<?php
header('Access-Control-Allow-Origin: *'); 
header('Content-Type: application/json'); 

$status = $_POST["status"];
echo json_encode($status);
?>

Firebug Console: enter image description here

I cant seem to find the error here. Really appreciate your help

Upvotes: 0

Views: 2130

Answers (2)

Cristo Rutazihana
Cristo Rutazihana

Reputation: 121

To get the posted data just add this line in your php file

// get posted data
$data = json_decode(file_get_contents("php://input"));

Upvotes: 0

Igor Janković
Igor Janković

Reputation: 5532

I had the same problem. You can't send the POST params like the javascript object. You have to pass it like URLSearchParams. I've made a function which will do it for you. It will loop through the object and make URLSearchParam and return it as string.

private _buildParams(params: any) {
    let urlSearchParams = new URLSearchParams();

    for(let key in params){
        if(params.hasOwnProperty(key)){
            urlSearchParams.append(key, params[key]);
        }
    }
    return urlSearchParams.toString();
}

And then you call http post:

this._http.post(this.url, this._buildParams(params), {headers: this.headers});

Upvotes: 6

Related Questions