PHP POST empty after ajax sent

Question

Here I have a simple form:

<form class="form" id="loginForm">
                <div class="form-group">
                    <label for="affiliate">Affiliate</label>
                    <select class="form-control" id="affiliate" name="affiliate">
                        {{#list locations}}{{name}}{{/list}}
                    </select>
                </div>
                <div class="form-group">
                    <label for="uname">Username</label>
                    <input type="text" class="form-control" name="uname" id="uname">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <button type="submit" class="btn btn-lg float-right" id="btnLogin">Login</button>
            </form>

Then I prevent the default action from happening by:

    $('form').submit(function(event) {
    event.preventDefault();

    //attempt to log in to the system
    attemptLogin(event)
});

Inside the attemptLogin method

function attemptLogin(form){

//convert our form data to an array, then convert that array to JSON
var formData = JSON.stringify($('#loginForm').serializeArray());

//url for login, in future should be grabbed from action of form
var url = "http://www.rsbmat.com/api/login.php";

//debug statement
console.log(formData);

//make an ajax call to the server
$.ajax({
    //sent header information with ajax call, so app and server know that information can be sent back
    header: {'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': "Content-Type, Origin, Accept, X-Requested-With"},

    //method to send data to server
    method: "POST",

    //url the data will be sent
    url: url,

    cache: false,

    //data we are sending
    data: formData,

    //allow cross domain
    crossDomain: true,

    //type of content going to be sent
    contentType: "application/json",

    //type of data we are receiving
    dataType: "json",

    //this is called BEFORE the ajax call is sent
    beforeSend: function(xhr){
        xhr.withCredentials = true;
    }
    //when it's finished what do we do with data sent back
}).done(function(data){
    console.log(data);
});

}

And on the PHP side, I've tried print_r, echo, var dump and json_encode of the POST array, however it's always empty. The form data is not being sent. Before I send the ajax request, I print the json data to make sure it is indeed there:

[{"name":"affiliate","value":"South King County"},{"name":"uname","value":"testuser"},{"name":"password","value":"testpassword"}]

And the data is there however, the information received from the server is still empty.

<?php
header("Content-Type: application/json", true);
require_once("../../db.php");

//echo $_POST;
//print_r($_POST);
echo json_encode($_POST);
//var_dump(json_decode(file_get_contents("php://input")));

I have everything commented out to just get the POST to print.. It does echo back to the app, I can see it in console.log, however it is empty.