AngularJS Http Post to API

Question

When Add new User is clicked there will be a modal pop-up with form that include a text field and a checkbox.

When I click the create button it does not post the data to the API and also the modal pop-up remain there without closing.

I want the data to be posted to the API (insert), the modal pop-up to close after clicking on create and also the new user to be added to the List.

Please here is my code

$scope.createUser = function(){
        $http({
          method  : 'POST',
          url     : 'mydomain.com/api/CreateUser',
          data    : $scope.newUser,
          headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
         })
          .success(function() {});
  };


<div class="modal-body">

                  <form ng-submit="createUser ()">
                        <div class="form-group">
                            <div class="row" style="padding-left: 30px;">
                              <div class="col-xs-2">
                                <label>User Name</label>
                              </div>
                              <div class="col-xs-10">
                                <input type="text" class="form-control" placeholder="" ng-model="newUser.name">
                              </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="row" style="padding-left: 30px;">
                              <div class="col-xs-2">
                                <label>&nbsp;</label>
                              </div>
                              <div class="col-xs-10">
                                <input type="checkbox" name="active" ng-model="newUser.active"> &nbsp; Is active?
                              </div>
                            </div>

                        </div>


                        <div class="modal-footer">
                            <button class="btn btn-info" type="submit">Create</button>
                            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                        </div>
                </form>
        </div>

How are you retrieving the data in the API file?

A.Sharma
– A.Sharma

2016-03-14 15:46:44 +00:00
Commented Mar 14, 2016 at 15:46 — A.Sharma
– A.Sharma, Commented Mar 14, 2016 at 15:46
I retrieve data using http get, but couldn't post to it

user3055606
– user3055606

2016-03-14 15:51:30 +00:00
Commented Mar 14, 2016 at 15:51 — user3055606
– user3055606, Commented Mar 14, 2016 at 15:51

Konkko · Accepted Answer · 2016-03-14 16:16:05Z

2

Try this:

$http.post('mydomain.com/api/CreateUser', $scope.newUser).success(function(response) {
     console.log(response);
});

or

$http({
    method: 'POST',
    url: 'mydomain.com/api/CreateUser',
    headers: 
    {
        'Content-type': 'application/x-www-form-urlencoded',
    },
    data: 
        'name=' + $scope.newUser.name + 
        '&active=' + $scope.newUser.active
}).success(function(data, status) {
         console.log(data);
});

edited Mar 14, 2016 at 16:16

answered Mar 14, 2016 at 15:51

Konkko

6624 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Konkko Over a year ago

@user3055606 or you can try if the edited version works for you

user3055606 Over a year ago

I'm not in possession of the API, I'm just to consume it. Can you help post a working example on plnkr using an xml as database?

Konkko Over a year ago

You should be able to provide info from the API

user3055606 Over a year ago

Yes i can get info about each field from the api but not example

Konkko Over a year ago

Could you provide more info what you are using otherwise I can't help you.

Collectives™ on Stack Overflow

AngularJS Http Post to API

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related