title: Strange behavior when sending JSON over AJAX
body: <p>I am encountering some really strange behavior when sending JSON over AJAX.</p>
  
  <p>JSON data: </p>
  
  <pre><code>data = {
      "name": "box1",
      "comment": ["fragile"],
      "type_A": [
          {
              "item": "1",
              "attr": [
                  "big",
                  "red"
              ]
          },
          {
              "item": "2",
              "attr": [
                  "small",
                  "red"
              ]
          },
      ],
      "type_B": [],
      "misc": {}
  };
  </code></pre>
  
  <p>POST request:</p>
  
  <pre><code>$.ajax({
      url: url,
      type: "POST",
      // data: JSON.stringify(data),
      data: data,
      success: function (result) {
          console.log("inside success");
      },
      error: function (error) {
          console.log("inside error");
      }
  });
  </code></pre>
  
  <p>If I pass in <code>data</code> here without <code>JSON.stringify()</code>, the empty fields <code>type_B</code> and <code>misc</code> get lost/stripped away. But if I do use <code>JSON.stringify()</code> then the backend cannot parse it properly without <code>JSON.parse()</code>. Is there a way to not strip away empty fields without doing a <code>JSON.parse()</code> in the backend?</p>
  
  <p>I tried adding <code>contentType: "application/json"</code> and <code>dataType: "json"</code> to the request but didn't help. </p>