Javascript : Send JSON Object with Ajax?

Question

Is this possible?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

Maybe with: a header with content type : application/json?:

xmlHttp.setRequestHeader('Content-Type', 'application/json')

Otherwise I can use:

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

and then JSON.stringify the JSON object and send it in a parameter, but it would be cool to send it in this way if it's possible.

score 356 · Accepted Answer · edited Apr 22 '18 at 18:50

356

With jQuery:

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

Without jQuery:

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

edited Apr 22 '18 at 18:50

Kinrany

99
1
9

answered Jun 20 '11 at 22:57

Nathan Romano

7,016
3
19
18

2

but man I can use content-type:`application/x-www-form-urlencoded` too if I use stringify, then what's the point to use `application/json`? :) – Adam Halasz Jun 20 '11 at 23:31
4

@CIRK: What's it matter? The content-type setting is completely arbitrary unless the server treats the one or the other specially. It's just data flowing back and forth at the end of the day. – mellamokb Jun 21 '11 at 00:14
19

well if your post body is expected to be JSON eg ({name:"John",time:"2pm"}) use content type application/json if your post body is form urlencoded data (name=John&time=2pm) use application/x-www-form-urlencoded – Nathan Romano Jun 21 '11 at 13:56
2

where should I put the URL? – Aaron Liu Jul 11 '15 at 13:40
The content-type header is required for some backends. The resource controllers in Spring for example fail if the "Consumes" meta specifies application/json. You can also set responseType if "Produces" meta is set on the method. – Shanimal Jan 07 '16 at 20:15
8

@ShuruiLiu a URL goes in place of `"/json-handler"` as a 2nd param of the `open()` method – Nil Feb 07 '17 at 12:39
I like the "not using jQuery example" showing that using JQuery is totally redundant. – Wilt Oct 16 '17 at 15:56
how can retrieve the data in receiving end – Rajib Dec 19 '17 at 08:26
Hi Nathan, Can we get the success callback in post method? – Ankit Parmar Sep 04 '18 at 13:34

score 38 · Answer 2 · edited Nov 18 '15 at 02:56

38

If you`re not using jQuery then please make sure:

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

And for the php receiving end:

 $_POST['json_name']

edited Nov 18 '15 at 02:56

Paulo Avelar

2,140
1
17
31

answered Nov 18 '15 at 02:13

shantanu chandra

537
4
4

Can't use it directly ? – rohitsakala Apr 01 '16 at 04:56
9

I don't think this answers the question asked. I believe the dev wants to send a blob of JSON to PHP as Content-Type: application/json, not wrapped in a urlencoded wrapper. – Fordi Sep 22 '16 at 15:39
2

This is not really sending JSON over, it is sending formdata over. You can also send JSON directly, in which case you can not read it with $_POST, but instead read it with json_decode(file_get_contents('php://input')); – David Oct 22 '17 at 08:28
Dear friends can you share this POST ajax with the entire needed code to be used on the page? Or thank you as well if you have a kind link to some full working example of vanilla ajax POST with JSON – Robert Feb 21 '19 at 06:56

score 2 · Answer 3 · answered Oct 14 '19 at 13:27

I struggled for a couple of days to find anything that would work for me as was passing multiple arrays of ids and returning a blob. Turns out if using .NET CORE I'm using 2.1, you need to use [FromBody] and as can only use once you need to create a viewmodel to hold the data.

Wrap up content like below,

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

In my case I had already json'd the arrays and passed the result to the function

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

Then call the XMLHttpRequest POST and stringify the object

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

Then have a model like this

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

Then pass in Action like

public async Task<IActionResult> MyAction([FromBody] MyModel model)

Use this add-on if your returning a file

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

user3310115 · Answer 4 · 2018-11-05T06:28:42.853

1

Adding Json.stringfy around the json that fixed the issue

edited Nov 05 '18 at 06:28

answered Aug 09 '18 at 23:02

user3310115

1,372
2
18
48

Javascript : Send JSON Object with Ajax?

4 Answers4

Linked

Related