Admin Ajax and HTML5 Formdata

So it turns out the only problem was the header content type.

By removing
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); and just leaving it out, it worked fine. That’s also with the form action being grabbed and appended.

Ajax call:

var formData = new FormData(form);
formData.append('security', WP.nonce);
formData.append('action', form.getAttribute('action'));

u.jax.post(WP.ajax, formData, onSent);

Ajax Function:

u.jax.post = function(url, data, success) {
    var request = new XMLHttpRequest();

    request.open('POST', url, true);
    request.send(data);

    request.onreadystatechange = function() {
        if (request.readyState === 4) {

            if (typeof request.responseText == 'string') {
                data = request.responseText;
            } else {
                data = JSON.parse(request.responseText);
            }

            success(data);
            return;

        }
    };
}

Form:

<form action="newsletter_signup">

    <div class="field">
        <label>Your Email Address</label>
        <input type="email" name="email-address">
        <button type="submit">submit</button>
    </div>

</form>

PHP:

function newsletter_signup(){

    // Get the email address
    $email = sanitize_email($_POST['email-address']);

    // Do what you wish with the email address.

    //Setup the data to send back
    $data = array();

    // json encode the data to send back
    echo json_encode($data);
    exit;

}

add_action('wp_ajax_newsletter_signup',         'newsletter_signup');
add_action('wp_ajax_nopriv_newsletter_signup',  'newsletter_signup');