Can't receive POST data through AJAX

So what I'm trying to do, is send some jQuery variables to my PHP script using Ajax post. However, for some reason, I cannot set the PHP variables to contain the values of the jQuery variables.

I have tried multiple types of Ajax data, like forms (new FormData();) and arrays.

script.js

$.ajax({
  url: 'file.php',
  type: 'POST',
  data: {
    'document_id': document_id,
    'section_id': section_id,
    'active_state': active_state
  },
  beforeSend: function () {
    console.log('the data is: ' + document_id + section_id + active_state + '...');
  },
  success: function (response) {
    console.log(response + ' is locked!');
  },
  fail: function (error) {
    console.log(error + ' could not be locked');

});

file.php

print_r($_POST);

However, in the success function of the Ajax request, I DO receive an array back with the proper variables. When I check the output of the PHP file, it just returns a blank array.

This is what I eventually need to do:

if(isset($_POST['document_id'])){

    $document_id = $_POST['document_id'];
    $section_id = $_POST['section_id'];
    $active_state = $_POST['active_state'];

    // echo back the data to the success function
    // proceed with insert into database
} else {

  echo 'the data has not been set';    

}

Any insights on what I may be doing wrong?