Empty POST data on server on AJAX request using Angular $http

Question

I use AngularJS to build an AJAX form which is then processed on a server running Wordpress.

Server-side handler is simple:

function rnr_contact_callback() {
    $name = $_POST['firstName'] . ' ' . $_POST['lastName'];

    wp_mail(
        '[email protected]',
        'Contact form submitted',
        $name . '(' . $_POST['email'] . ') sent a message: ' . $_POST['comment']
    );

    exit;
}

Client-side controller:

angular.module('app').controller('ContactForm', function($scope, $http) {
    $scope.sendContactForm = function() {
        $http({ 
            method: 'POST', 
            url: '/wp-admin/admin-ajax.php', 
            params: {
                action: 'contact',
                firstName: $scope.userFirstName,
                lastName: $scope.userLastName,
                email: $scope.userEmail,
                comment: $scope.userComment
            }
        }).success(function(data, status, headers, config) {
            $scope.contactFormSent = true;
        }).error(function(data, status, headers, config) {

        });
    };
});

I tested the $scope consistency, and it is all right. Moreover, the POST request is handled: I receive an email. The problem is, email body looks like: () sent a message:. I make a conclusion that, on server, none of $_POST['...'] is set. Why? What do I do wrong?

Answer 1

I got it. I just should have used $_REQUEST instead of $_POST within every function which handles AJAX requests.

Answer 2

Parse action:

function angular_ajax_params_to_post() {
    $is_ajax = ( defined( 'DOING_AJAX' ) && DOING_AJAX );
    if($is_ajax){
        $params = json_decode(file_get_contents('php://input'), true);

        foreach ($params as $param_key => $param_val) {
            $_POST[ $param_key ] = $param_val;
        }
    }
}
add_action( 'plugins_loaded', 'angular_ajax_params_to_post' );

This function parse angular post string into $_POST array

Answer 3

Just had the same issue. The $_REQUEST is empty because angulars $http sends its data as JSON per default. Yu have to send the data as formdata:

var app = angular.module('foo', []);

app.config(function ($httpProvider) {
    // send all requests payload as query string
    $httpProvider.defaults.transformRequest = function(data){
        if (data === undefined) {
            return data;
        }
        return jQuery.param(data);
    };

    // set all post requests content type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
});

Answer 4

You have to use $_REQUEST instead of $_POST in PHP:

function rnr_contact_callback() {
    $name = $_REQUEST['firstName'] . ' ' . $_REQUEST['lastName'];

    wp_mail(
        '[email protected]',
        'Contact form submitted',
        $name . '(' . $_REQUEST['email'] . ') sent a message: ' . $_POST['comment']
    );

    exit;
}