Why does my $.ajax() JSON data get posted back to the server like this?

Question

I have a list of items in javascript as such:

var list = {
    { id: 1, name: 'Charles' }, 
    { id: 8, name: 'John' }, 
    { id: 13, name: 'Sally' }
};

But when I post it to the server like this:

$.ajax({
    url: '/Controller/ActionName',
    data: { items: list }
});

It arrives at the server like this:

items[0][id]=1&items[0][name]=Charles&items[1][id]=8&items[1][name]=John&items[2][id]=13&items[2][name]=Sally

How do I get it to arrive in JSON notation i.e. with braces! so that the .NET parsers can parse it correctly?

U need to convert it into a string (formatted JSON) and then post it — vinothkr, Nov 15 '10 at 08:23
How do I achieve that? I think `djch` below has tried to show this below but using `stringify` which I assume is from an external library. There must be something built into jQuery or javascript to do this? — Jimbo, Nov 15 '10 at 08:40
use $.post. $.ajax uses GET, which means there is no request body. JSON cannot be put into the querystring, it must be put in the body. — RPM1984, Nov 15 '10 at 09:05
JSON.stringify is natively baked into most modern browsers (even IE8 running in IE8 mode!) and is the counterpart of JSON.parse. If the browser doesn't support it natively, you can include json2.js from json.org to add support for it. — David Henderson, Nov 15 '10 at 11:10

David Henderson · Accepted Answer · 2010-11-15T09:25:58.497

Try:

$.ajax({
    url: '/Controller/ActionName',
    data: { items: JSON.stringify(list) }
});

I've tried the following options:

 <script type="text/javascript">

    var list = [
    { id: 1, name: 'Charles' }, 
    { id: 8, name: 'John' }, 
    { id: 13, name: 'Sally' }
];


  function run(){
      $.ajax({
          url: 'default.aspx',
          data: { items: JSON.stringify(list) }
      });

      return false;

  }

  function run2() {
      $.ajax({
          url: 'default.aspx',
          data: { items: list }
      });
      return false;

  }

  function run3() {
      $.ajax({
          url: 'default.aspx',
          data: { items: list },
          processData: false
      });
      return false;
  }

  function run4() {
      $.ajax({
          url: 'default.aspx',
          data: list
      });
      return false;
  }
</script>

Run 1: default.aspx?items=%5B%7B%22id%22%3A1%2C%22name%22%3A%22Charles%22%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22John%22%7D%2C%7B%22id%22%3A13%2C%22name%22%3A%22Sally%22%7D%5D

Querystring["items"] = '[{"id":1,"name":"Charles"},{"id":8,"name":"John"},{"id":13,"name":"Sally"}]'

Run 2: default.aspx?items%5B0%5D%5Bid%5D=1&items%5B0%5D%5Bname%5D=Charles&items%5B1%5D%5Bid%5D=8&items%5B1%5D%5Bname%5D=John&items%5B2%5D%5Bid%5D=13&items%5B2%5D%5Bname%5D=Sally

items[0][id] 1

items[0][name] Charles

items[1][id] 8

items[1][name] John

items[2][id] 13

items[2][name] Sally

Run 3: default.aspx?[object%20Object]

[object Object]

Run 4: default.aspx?Charles=undefined&John=undefined&Sally=undefined

Request["Charles"] = 'undefined'

Request["John"] = 'undefined'

Request["Sally"] = 'undefined'

Now from the OP, I think Run 1 is the required option as he wants to process the JSON string on the server side?

Thanks, pretty thorough test! These are what I have managed to get on server side now as well. Are you able to reconstruct the data on server side using Run 1? BTW, you can have points for both this post and http://stackoverflow.com/questions/4164114/posting-json-data-to-asp-net-mvc if you succeed! :) — Jimbo, Nov 15 '10 at 10:23

score 1 · Answer 2 · answered Nov 15 '10 at 11:15

I'm on my mobile but you can solve this by using the following library to convert your JSON object into a well format JSON string.

jquery JSON project

The library is only 3k in size and also provides you with additional JSON functionality such as parsing etc.

Once you have included the script on your page you can then convert your object to the JSON string and make your call using:

$.ajax({
        type: "POST",
        url: '/Controller/ActionName',
        cache: false,
        data: $.toJSON(list), // Convert JSON object to String for Post
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            GenerateResultsCallback(response.d)
        },
        error: function (e) {
            alert('error during ajax request');
        }
    });

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

From the JQuery AJAX Page:

The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string before it is sent. This processing can be circumvented by setting processData to false

So your JSON object is converted to a query string.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 15 '10 at 08:28

Rajat

32,970
17
67
87

I tried setting `processData: false` and all that achieves is to somehow magically post NO data. I wish I could debug the jQuery but... – Jimbo Nov 15 '10 at 08:36

ace · Answer 4 · 2010-11-15T09:10:28.240

0

Use $.post() instead of $.ajax() and it should work for you.

$.ajax does a GET request, that's why it converts your JSON to a string and appends to the query string.

Edit: It looks like your are trying to post a list of object, in that case your var should be an Array of objects like this:

var list = [
    { id: 1, name: 'Charles' }, 
    { id: 8, name: 'John' }, 
    { id: 13, name: 'Sally' }
];


$.post({
    url: '/Controller/ActionName',
    data: { "items": list }
});

edited Nov 15 '10 at 09:10

answered Nov 15 '10 at 08:41

ace

2,141
7
29
39

My $.ajax() has a global setting to force a POST and unfortunately still doesnt fix the problem. Neither does $.post(). The problem here is how jQuery serializes the post data... – Jimbo Nov 15 '10 at 09:07
Try just `data: list` for the argument to `$.post` – RPM1984 Nov 15 '10 at 09:09

Why does my $.ajax() JSON data get posted back to the server like this?

4 Answers4