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

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?

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?

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');
        }
    });

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.

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 }
});