POSTing using AngularJS $resource

Question

Using a normal html form, I can add a new task by sending POST request to /api/tasks/insert/ POST data includes $name and $description of the task. However, when I use Angular to push the data to REST API in php, only a POST request is sent and an empty row is created in the database. This means that the POST variables are not being passed i.e. name and description. What am I doing wrong?

I have been stuck at this for the last few hours now. I have checked countless tutorials and am pretty sure of the syntax. My backend REST api in PHP works fine.

var res=$resource('http://localhost/api/tasks/insert/',{},
            {
                createTask:{method:'POST'}
            });
        postData={name:"Hello",description:"DescBaby"}
        res.createTask({},postData);
        //res.createTask(postData); tried this also, but doesn't work

Another variation that I tried based on an comment was this:

 res.createTask({name:"TestName", description:"descBaby"}).$promise.then(function(value)
            {
                console.log("Success");  //I get success in console.
            },function(errResponse)
            {
                console.log("Error");
            });

Angular Does not give me any errors. Just sends a blank POST request to the url.

EDIT: I checked in the network pane in Chrome whether the data was sent or not and as it turns out it is being sent. However, in the response it's showing this :

Undefined index: name in XYZ.php line ABC.

The line pointed above is the following line in my PHP:

$obj->InsertTask($_POST['name'],$_POST['description']);

check this url: http://stackoverflow.com/questions/13269882/angularjs-resource-restful-example — JQuery Guru, Feb 22 '14 at 07:52
Check in the browser network pane under the request header and response? See if the data is sent? — joashp, Feb 22 '14 at 08:46

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

Thanks to a friend of mine, I finally got the code running. The problem wasn't with my Angualar Code but with php code.

As it turns out I cannot read POST data as $_POST[]. file_get_contents should be used in such cases as data is sent through a JSON payload and not through request parameters!

Here's how I got it running : Angularjs $http.post, passing array to PHP

edited May 23 '17 at 12:28

Community

1
1

answered Feb 22 '14 at 09:46

SLearner

1,419
5
18
22

score 0 · Answer 2 · answered Feb 22 '14 at 09:32

Did you look at the network tab of debugger? You can check if valid data was sent to server. If it was ok this is not JS or Angular question. On the first look it seems that you have valid code for angular. Just in case check if you have set proper ajax headers.

"X-Requested-With": "XMLHttpRequest"

Does other AJAX calls work for you?

score 0 · Answer 3 · answered Feb 22 '14 at 09:39

0

Try this (and create a factory to follow the best practices):

Service

services.factory("Tasks", function($resource) {
   return $resource('http://localhost/api/tasks/insert/', {}, {
      createTask: {method:'POST', params: {name:"Hello",description:"DescBaby"}}
   })
});

Controller

Tasks.$createTask();

answered Feb 22 '14 at 09:39

Paul Rad

4,820
1
22
23

please see my answer. The problem wasn't with the JS but with PHP. – SLearner Feb 22 '14 at 09:47
Inspect network on your browser and look if the POST data are passed in the head section – Paul Rad Feb 22 '14 at 09:53

POSTing using AngularJS $resource

3 Answers3