Angular http request with custom data

Question

I am trying to do a http request to a php file on my server. My code i am using at the moment is as follows:

App.controller('GetSales', ['$scope', '$http', function ($scope, $http) {

        $http({
            method: 'POST',
            url: '/app/controller/apis/_sales.php?period_start=2015-07-01&period_end=2015-07-31&join=leads&status=0&category=0user=1'
        })
        .success(function (data) {
            $scope.sales = data;
        });
}]);

Isnt there a better way to do this? When i add these var as data it doesnt get posted to my page?

data: {
            period_start: '2015-07-01',
            period_end: '2015-07-31',
            join: 'leads',
            status: '',
            category: '',
            user: '1'
        };

In php i get the data like this, its also sanitized for security reason:

$user = filter_var($_REQUEST['user'], FILTER_SANITIZE_NUMBER_INT);
$period_start = $_REQUEST['period_start'].' 00:00:00';

Answer 1

At first sight you are tryng to call an HTTP POST service, but you send parameter like it was a GET service, try something like that:

App.controller('GetSales', ['$scope', '$http', function ($scope, $http) {
    $http.post('/app/controller/apis/_sales.php',
        {
            period_start: '2015-07-01',
            period_end: '2015-07-31',
            join: 'leads',
            status: '',
            category: '',
            user: '1'
        })
        .success(function (data) {
            $scope.sales = data;
        })
        .error(function (data, status) {
            console.log(status);
        });

Answer 2

I would use json_decode( file_get_contents('php://input') ) on your serverside. Also, please don't forget to sanitize your user sent data!

var dataParams = {
            period_start: '2015-07-01',
            period_end: '2015-07-31',
            join: 'leads',
            status: '',
            category: '',
            user: '1'
};
App.controller('GetSales', ['$scope', '$http', function ($scope, $http) {
        $http.post('/app/controller/apis/_sales.php', dataParams)
        .success(function (data) {
            $scope.sales = data;
        });
}]);

You will want to watch ever using the variable data as it will most likely collide with another variable, such as in your demonstration where you have named your post params as data while the return response is also aliased as data in the $.post success. This may not cause an issue in this case - but it usually will, so I renamed it for you out of habit.

Your server side could look something like this depending on what your usernames strings consist of:

public static function sanatize_client_string($dirtyString){
                    $cleanString = htmlspecialchars(strtolower(preg_replace("/[^a-z]+/i", "[FORBIDDEN_CHAR]", $dirtyString)));
                    return $cleanString;
                }

$client_data = sanatize_client_string(json_decode( file_get_contents('php://input'))); 

Now you can access the username like:

echo $client_data['user']; // Will echo 1 based on the post data you are sending

This is what a simple serverside data-router could look like, as using normal $_POST has never worked for Angular data for me either:

    /**
    * Collect all Angular HTTP Request data
    */
    $client_data = json_decode( file_get_contents('php://input') );

    $app_state = utils::sanatizeClientString($client_data->appState); // <- name of prop must match client angularPostObj.x = serverModel.x

    /**
    * Cache the view path to the model
    */   
    $module_exists_in_model = isset($app['view_data']['views'][$app_state]);

    /**
     * If the angular post request matches data in the model, return the requested dataset, while if no object is found 
     * under that address, the error object will be returned which will send and error data to the view. 
     * 
     * This error condition will never happen aside from an attack because the clientside AngularJS router would prevent any 
     * unregistered paths from being even sent to the server. This would happen using a post mocking service or by 
     * forcing the string change in the code inspector while using the site.
     */
    $module_exists_in_model ?
        $view_model = $app['view_data']['views'][$app_state] : 
        $view_model = $app['view_data']['views']['error'];

    // Call the view from Angular post data, passing it to a Class that sends a response as valid JSON

    Render_app::echo_json($view_model);

I was informed of this by: http://www.cleverweb.nl/javascript/a-simple-search-with-angularjs-and-php/ and How to post a data in Angular?.

The point is... use $client_data = json_decode( file_get_contents('php://input') ); instead of $client_data = $_POST['username'];