Having trouble sending data with a POST request using Angular 4's HttpClient?

Question

Having trouble sending data with a POST request using Angular 4's HttpClient?

Angular 4.4.4
This is an introduction to my app component

constructor(
    private http: HttpClient,
)

this.http.post('/api.php', {name, age}).subscribe(response => {
    console.log(response);
});

api.php    ->    exit(json_encode($_POST));

No data received in $_POST

Returning an empty array

(

let xmlRequest = new XMLHttpRequest();

.... is functioning properly)

I have attempted to set the header

  let headers = new HttpHeaders().set('Content-Type', 'application/json; charset=UTF-8');

but it does not seem to be working

I apologize for this issue as I have spent a full day trying to solve it.

ps. Both client and server are from the same origin.

php angular post httpclient

Answer 1

Answer №1

One way to handle parameters on the Angular side is by using a FormData Object.

const params = new FormData();
params.append('param1', 'value1');
params.append('param2', 'value1');
this.http.post('/api.php', params).subscribe(....)

In your PHP project, you can access these parameters using $_POST['param1'] and $_POST['param2'].

The method of using FormData Object seems more straightforward to me compared to dealing with file_get_contents.

Answer 2

One way to handle parameters on the Angular side is by using a FormData Object.

const params = new FormData();
params.append('param1', 'value1');
params.append('param2', 'value1');
this.http.post('/api.php', params).subscribe(....)

In your PHP project, you can access these parameters using $_POST['param1'] and $_POST['param2'].

The method of using FormData Object seems more straightforward to me compared to dealing with file_get_contents.

Answer 3

Answer №2

Feel free to give this a try, I believe it could be helpful for you

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class LandingService {

    private apiEndpoint = 'http://localhost:5000/';

  list:any;
  headers : any;
  constructor(private _http: HttpClient){
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
  }
     getSearchResults(searchText){
          this.list ={"sentences":searchText}
          return this._http.post(this.apiEndpoint+'searchBotsNew',this.list,this.headers)
          .map(response =>response.json())
          .do(data => console.log(JSON.stringify(data)));

      }



}

Answer 4

Feel free to give this a try, I believe it could be helpful for you

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';


@Injectable()
export class LandingService {

    private apiEndpoint = 'http://localhost:5000/';

  list:any;
  headers : any;
  constructor(private _http: HttpClient){
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
  }
     getSearchResults(searchText){
          this.list ={"sentences":searchText}
          return this._http.post(this.apiEndpoint+'searchBotsNew',this.list,this.headers)
          .map(response =>response.json())
          .do(data => console.log(JSON.stringify(data)));

      }



}

Answer 5

Answer №3

The solution to the problem has been discovered by me.

When dealing with PHP, it is important to note that $_POST will only accept formdata.

If you set the request header as 'Content-Type: application/json', you can then retrieve the data using

file_get_contents('php://input');

This means that:

$_POST = json_decode(file_get_contents('php://input'));

Answer 6

The solution to the problem has been discovered by me.

When dealing with PHP, it is important to note that $_POST will only accept formdata.

If you set the request header as 'Content-Type: application/json', you can then retrieve the data using

file_get_contents('php://input');

This means that:

$_POST = json_decode(file_get_contents('php://input'));

Having trouble sending data with a POST request using Angular 4's HttpClient?

Answer №1

Answer №2

Answer №3

Similar questions

When using npm to install Angular Bootstrap, the versions that are installed do not always match the specific versions

Looking to eliminate the usage of hostname, username, and password in PHP code

The service.subscribe function in Angular's Component Constructor is not functioning properly after the update

Storing Angular 4 Http Post response data in an object

What is the most efficient method for checking the type of a key or value within a 'foreach' loop?

Using Angular to include more than two parameters in an HTTP GET request

The conditional statement for ajax is malfunctioning

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

Troubleshooting Issues with Passing Values in jQuery AJAX POST Requests

Encountering a 403 error upon refreshing the page of my Angular 6 project

Roles in the Nebular system always have the granted status set to true by default

Retrieving Mysql field data from an array

Is it feasible to obtain the userId or userInfo from the Firebase authentication API without requiring a login?

How to Retrieve Data from an HTML Table using the Laravel Framework

Replicating the Angular project folder is not effective

Leveraging Angular for Parsing JSON Data

Tips on updating checkbox background color after being selected

``There seems to be an issue with clicking an element in selenium

Craft fresh items within HTTP request mapping

Using the Zend HTTP library, Privoxy, Tor, and cURL work together seamlessly