issue in Angularjs $http.post to webapi

Question

I am reading angularjs $http.post shortcut method on the following site http://docs.angularjs.org/api/ng.$http#methods_post

it accept following 3 parameters.

post(url, data, config)

Currently i am facing an issue how to pass data from my view. Here is my view code which ask user to enter ID and ContactNumber.

<div data-ng-controller="postreq">
    <form>
    RequestID:<input type="text" data-ng-model="request.Id"/>
    ContactNo:<input type="text" data-ng-model="request.newcontact"/>
    <button data-ng-click="add()">Add</button>

    </form>
</div>

Here what i am trying in my Angularjs controller and it is not working .. no idea how to get the entered values of request.Id and request.newcontact.

function postreq($scope, $http) {

    $scope.add = function ()
    {
     $http.post(
    '/api/request',
    JSON.stringify(**?????? here i am confused how to pass data**),
    {
        headers: {
            'Content-Type': 'application/json'
        }
    }
).success(function (data) {
    $scope.request= data;
});

}

score 3 · Answer 1 · answered Nov 12 '13 at 10:44

Here's a baic example of how to do a $http post with Angular:

 $http({
    cache: false,
    url: "/api/request",
    method: "POST",
    data: {email: "my_login_email@example.com", password: "123456"}
  }).
  success(function (data) ->
    // here the "data" parameter has your response data
  ).
  error(function () ->
    // if you are here something is not going so good
  )

Also keep in mind that Angular doesn't POST data like a normal form (this is pretty important depending on your back-end system, for e.g. in PHP you won't be able to use $_POST). In order to do that, you'll need a bit more work:

// your module
myModule = angular.module("myModule ", []);
// you module config
myModule.config (["$httpProvider", function($httpProvider) {
   $httpProvider.defaults.transformRequest = function (data) {
       if data == undefined {
         return data
       }
       return $.param(data)
   }
   $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=UTF-8"
}])

Also notice the $.param which is jQuery. You can find other ways to do this if you don't use jquery.

score 1 · Accepted Answer · answered Nov 12 '13 at 09:33

1

$http does a few things internally so that we, as application developers, don't have to think about them.

Does a JSON.stringify if the content needs it
Adds appropriate headers
Allows for interception before/after request
Handles caching of responses (not that relevant to your question, but good to know)

So, this means that when using $http, we don't need to explicitly do these things. You can change your code to:

$http.post('/api/request', $scope.request);

This will achieve a everything that your question requires. BTW, this will return a promise with success and error callback methods. These can be used to handle the response.

answered Nov 12 '13 at 09:33

Davin Tryon

66,517
15
143
132

Thanks Davin, Much helpful and very well explained. – TheKingPinMirza Nov 12 '13 at 16:26
1

When I try this way of doing a post, I get a couple errors: OPTIONS method not allowed and XMLHttpRequest cannot load 'web api address here'. Invalid HTTP status code 405. Any idea what that's about? – Rex_C Oct 30 '14 at 21:52
1

@Rex_C most likely a CORS issue that you are facing. – Davin Tryon Oct 30 '14 at 22:10
@DavinTryon That was an initial hurdle, so I did some research and added some Access-Control-Allow-Origin/Headers/Methods custom headers in my web.config, but still no dice. – Rex_C Oct 30 '14 at 22:14
@Rex_C did you allow the OPTIONS verb? – Davin Tryon Oct 30 '14 at 22:17
@DavinTryon Yes - – Rex_C Oct 30 '14 at 22:18

score 0 · Answer 3 · answered Nov 12 '13 at 09:13

0

You can use this syntax:

$http.post(
'/api/request',
$scope.request,
{
    headers: {
        'Content-Type': 'application/json'
    }
});

answered Nov 12 '13 at 09:13

Anton Rodin

991
2
12
19

Thanks Anton, well replied. – TheKingPinMirza Nov 12 '13 at 16:26

issue in Angularjs $http.post to webapi

3 Answers3

Linked