在Angularjs $ http.post中向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;
});

}

Answer 1

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 eg 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.

Answer 2

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

1. Does a JSON.stringify if the content needs it
2. Adds appropriate headers
3. Allows for interception before/after request
4. 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.

Answer 3

You can use this syntax:

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