POST : angularjs app to cakephp site

Question

I put this add action in my spoutnik controller like the REST doc of cakephp :

public function add() {

    $this->layout = null;
    $this->autoRender = false;

    if ($this->Spoutnik->save($this->request->data)) {
        $message = array(
            'text' => __('Saved'),
            'type' => 'success'
        );
    } else {
        $message = array(
            'text' => __('Error'),
            'type' => 'error'
        );
    }
    $this->set(array(
        'message' => $message,
        '_serialize' => array('message')
    ));

}

I put this JS part in my angularjs app (actually in a other domain than the cakephp site):

<form ng-controller="MessageController" ng-submit="createMessage()">

    <legend>Create Message</legend>

    <label>Title</label> 
    <input type="text" id="name" name="name" ng-model="message.name" placeholder="Title"> 

    <label>Message</label>
    <input type="text" id="email" name="email" ng-model="message.email" placeholder="ur message here"> 

    <button class="btn btn-primary">Add</button>

</form>

and

function MessageController($scope, $http) {
    $scope.message = {};
    $scope.createMessage = function() {
        $http({
            method : 'POST',
            url : 'http://www.mycakephpdomain.com/spoutnik/add',
            data : $scope.message
        })
    }
}

Nothing work... i have no errors in chrome console, i'm totally lost :/ I just want to build an android app in angularjs with no java or PHP, and post to my cakephp website. For the moment, i try to post form an other domain (i can't touch apache configuration).

What is wrong in my code ?

score 0 · Answer 1 · answered Jul 23 '14 at 11:07

Just for the record and debugging purposes:

I did not find the reason to this same problem, but looking the AJAX request done by AngularJS I found that message data from the form was no being sent as regular form data. Instead it was being sent as REQUEST PAYLOAD.

Indeed, the response from the server contained this error just before the JSON response from my view:

 Warning (4096): Argument 1 passed to Hash::get() must be of the type
 array, null given, called in
 /var/www/test/lib/Cake/Network/CakeRequest.php on line 866 and defined
 [CORE/Cake/Utility/Hash.php, line 44]

Of course, i checked that there was nothing strange by my side executed, I even tried disabling all security component and allowing AUTH *.

If you set the core.debug in php to 0, the error wont be shown and everything will be ok, but thats not what you want for your awesome app.*

I changed query data from $scope.message to just $('form').serialize(), but still no way. So finally, the only solution I found was to remove the $http.post and replace it by a very know $.ajax() which just did its job as always...

So thats my suggestion, remove the $http.post and user common jQuery.ajax();

score 0 · Answer 2 · edited May 23 '17 at 11:57

There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ($http.post(), etc.) don’t appear to be swappable with the jQuery equivalents (jQuery.post(), etc.) The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.

So concretely, your $_POST variable is empty !

To go through this problem there're 2 solutions:

Change the data format in Angular config
Change the way to get the datas with PHP(Deprecated but works)

I haven't invented anything here, just linking... Hope it'll help.

POST : angularjs app to cakephp site

2 Answers2