Send json object using POST pure javascript

Question

I want to send a JSON object to PHP server but I get an empty array there. Why is this happening?

var obj = {
    username: username,
    password: password
};

var ajax = new XMLHttpRequest();
ajax.open('post', 'ajax/login_register.php');
ajax.setRequestHeader("Content-type", "application/json;charset=UTF-8");
ajax.send(JSON.stringify(obj));

That is how you do it. The problem must be with how you are reading the data. — Quentin, Feb 12 '16 at 23:44
That would be it. JSON requests don't populate `$_POST`. See the duplicate question. — Quentin, Feb 12 '16 at 23:45
try setting the request header to `application/x-www-form-urlencoded` rather than `application/json;charset=UTF-8` ;-) — Professor Abronsius, Feb 12 '16 at 23:45
@RamRaider — The data in the question is encoded as JSON, it doesn't use form encoding. — Quentin, Feb 12 '16 at 23:46
@Quentin I agree this probably has a duplicate somewhere but does that one really match? OP is asking how to send it, not receive it. — Mike Cluck, Feb 12 '16 at 23:47
@MikeC — The code in the question is correct for sending it. The OP's comment shows that the problem *was* with how they were trying to recieve it. — Quentin, Feb 12 '16 at 23:48
@Quentin My mistake. Guess that's what I get for not working with raw XMLHttpRequest's in a while. — Mike Cluck, Feb 12 '16 at 23:49

Mike Cluck · Accepted Answer · 2016-02-12T23:46:39.503

3

You need to give it a name that you can reference on the server side.

ajax.send('user=' + encodeURIComponent(JSON.stringify(obj)));

$_POST['user'] // <-- your JSON string

edited Feb 12 '16 at 23:46

answered Feb 12 '16 at 23:42

Mike Cluck

30,526
12
76
90

I have tried this way and works but how` jQuery` does it so we do not use `$_POST['user']` in the back-end? – M1X Feb 12 '16 at 23:44
This won't send a JSON request. It will send a (badly because you forgot to use `encodeURIComponent`) form encoded request with a JSON text embedded in it. – Quentin Feb 12 '16 at 23:45
Do you mean you can access the individual properties through `$_POST`? That's done by extracting each property and sending it as a separate property. – Mike Cluck Feb 12 '16 at 23:46
Yeah thats exactly what I want. You mean `ajax.send('username=username&pass=pass');` like this ? – M1X Feb 12 '16 at 23:49
1

@rexhin Yup, that would work. – Mike Cluck Feb 12 '16 at 23:49
so this is the only way to read it from `$_POST` ? – M1X Feb 12 '16 at 23:50
1

@rexhin Pretty much. Every value has to have a matching name. It's up to you how to divvy that up. – Mike Cluck Feb 12 '16 at 23:53
won't work if OP keeps using contentType application/json – charlietfl Feb 13 '16 at 00:45
Hey work perfect for me! thanks! – Albert Hidalgo Mar 06 '18 at 20:29

Send json object using POST pure javascript

1 Answers1