Angular 8 - Post params sending in incorrect format

Question

I want to send post params to a endpoint, this m const httpOptions = {

    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
    })
  };
  return this.http.post('http://localhost/post.php', {
    "name":  "Customer004",
    "email":  "customer004@email.com",
    "tel":  "0000252525"
    }, httpOptions);
}

In localhost/post.php i got the follow code:

<?php
print_r($_POST);

The problem is that the navigator is sending the data in incorrect format. The browser send the follow: in incorrect format instead: in correct format

The response of the php code is:

Array ( [{"name":"Customer004","email":"customer004@email_com","tel":"0000252525"}] => )

instead:

Array ( ["name"]=>"Customer004",["email"]=>"customer004@email_com",["tel"]=>"0000252525" )

Where is the problem?

Remove the quotes from the keys of the JSON object you're sending over. Looks like you're sending over a JSON object instead of a Javascript Object, if that's your plan. See. https://stackoverflow.com/a/3975890/697079 — Christopher Marshall, Oct 26 '19 at 00:19
@ChristopherMarshall i put the code like that: name: "Customer004", email: "customer004@email.com", tel: "0000252525" and the problem persist — strongRain, Oct 26 '19 at 00:25
Maybe change the headers to `'Content-Type': 'application/json',` — Christopher Marshall, Oct 26 '19 at 00:27
@ChristopherMarshall that returns 'Array ( )' by the PHP code — strongRain, Oct 26 '19 at 00:32
Possible duplicate of [How to force Angular2 to POST using x-www-form-urlencoded](https://stackoverflow.com/questions/39863317/how-to-force-angular2-to-post-using-x-www-form-urlencoded) — The Fabio, Oct 26 '19 at 01:28

The Fabio · Accepted Answer · 2019-10-26T01:02:17.913

0

When you set the heading 'Content-Type': 'application/x-www-form-urlencoded' it dictates how the angular service http will format the data sent to the backend.

Change it to application/json and you will get your expected format

headers: new HttpHeaders({
    'Content-Type': 'application/json',
})

looking at a php example, it might be that you need to change your php code to decode json... but that's not my expertise.

I can try to guess based on the example that it would be something like this:

try:

print_r(json_decode($_POST));

edited Oct 26 '19 at 01:02

answered Oct 26 '19 at 00:46

The Fabio

5,369
1
25
55

When i use: `'Content-Type': 'application/json'` the PHP code returns `Array ( )` – strongRain Oct 26 '19 at 00:49
that's a server side issue... with `'Content-Type': 'application/json'` angular will send `{"name": "Customer004", "email": "customer004@email.com", "tel": "0000252525" }` you can verify it on your browser`s development tools network tab – The Fabio Oct 26 '19 at 00:55
Yes, it send: https://i.stack.imgur.com/ASGXR.png But i need to that send: https://i.stack.imgur.com/NziX5.png (in that way is that the browser send when i use a traditional form) – strongRain Oct 26 '19 at 01:01
that's incorrect... this form(formulario) payload tool from your pic is showing an attempt to parse the payload as `application/x-www-form-urlencoded` I updated the answer with a possible suggestion for you – The Fabio Oct 26 '19 at 01:08
The solution (a new code that you post) dont work, that returns a blank page (null). But why dont work in `application/x-www-form-urlencoded` mode like the browser send in a traditional form? – strongRain Oct 26 '19 at 01:19
the question was about angular though.... you are also having trouble with php (as i said not my expertise). – The Fabio Oct 26 '19 at 01:27
as you are having trouble parsing the json payload in php. you can use ` URLSearchParams()` as the answer to this question presents: https://stackoverflow.com/a/39864307/4604645 – The Fabio Oct 26 '19 at 01:30
The problem is not PHP, becasue when i send the form with a traditional HTML form, that works fine and PHP code return the variables correctly. – strongRain Oct 26 '19 at 01:41
I encourage you to study how to parse json payloads in PHP. Angular can send `x-www-form-urlencoded` payloads, but that's kind of hacky as you can see on this answer link i sent you. – The Fabio Oct 26 '19 at 01:52

Angular 8 - Post params sending in incorrect format

1 Answers1