jQuery AJAX JSON数据被展平

Question

When I try to send a nested object to my server using $.ajax() , the data received by the backend is flattened. I need to be able to send an object that contains another object to my backend. Here's an example of what's happening:

$.ajax({
  method: 'POST',
  url: '/users/create'
  data: {
    name: 'John Doe',
    age: 42,
    marbles: {
      blue: 4,
      red: 8
    }
  }
})

{
  'name': 'John Doe',
  'age': '42',
  'marbles[blue]': '4',
  'marbles[red]': '8'
}

I am expecting the following:

{
  name: 'John Doe',
  age: 42,
  marbles: {
    blue: 4,
    red: 8
  }
}

Does anyone have a clue what I can do to fix this? I have tried adding dataType: 'json' to the AJAX request.

Answer 1

You need to stringify your object first.

$.ajax({
  method: 'POST',
  url: '/users/create',
  contentType: 'application/json',
  data: JSON.stringify({
    name: 'John Doe',
    age: 42,
    marbles: {
      blue: 4,
      red: 8
    }
  })
})