title: Ajax - send array of objects using jQuery
body: <p>I am constructing an array of objects from form data in order to send to a processing script that will then send the data on to an API. The API does not allow CORS ajax requests, hence the need to send to an external script first.</p>
  
  <p>I can return simple strings, but when I stringify the data I have, the response from the server is always that the POST or GET (have tried both) data is just an empty array.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('#enrol').submit(function(e) {
      e.preventDefault();
  
      var collection = [];
  
      $('#enrol .form-row').each(function() {
          var email = $(this).find('input[type="email"]').val();
          var c1Val = $(this).find('.c1').is(':checked') ? 'true' : 'false';
          var c2Val = $(this).find('.c2').is(':checked') ? 'true' : 'false';
          var c3Val = $(this).find('.c3').is(':checked') ? 'true' : 'false';
          var c4Val = $(this).find('.c4').is(':checked') ? 'true' : 'false';
          var c5Val = $(this).find('.c5').is(':checked') ? 'true' : 'false';
          var c6Val = $(this).find('.c6').is(':checked') ? 'true' : 'false';
          var c7Val = $(this).find('.c7').is(':checked') ? 'true' : 'false';
  
          var person = {
              'email'   : email,
              'course1' : c1Val,
              'course2' : c2Val,
              'course3' : c3Val,
              'course4' : c4Val,
              'course5' : c5Val,
              'course6' : c6Val,
              'course7' : c7Val,
          }
          collection.push(person);
  
      });
  
      var dataString = JSON.stringify(collection);
  
      $.ajax({
          url: 'http://www.example.com/script.php',
          data: dataString,
          crossDomain: true,
          success: function(response) {
              console.log(response);
          },
          error: function(response) {
              console.log(response);
              alert(response.responseText);
          }
      });
  })
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>header("Access-Control-Allow-Origin: URLHERE");
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
  
  var_dump($_GET);
  </code></pre>
  
  <p>What I don't get is if I just JSON.stringify a simple string, I get the data returned, yet the array of objects seems to arrive at the php script as an empty array - or at least that's what the console.log is suggesting. I've outputted the dataString variable to ensure it has data - it does.</p>