POST data using AngularJS

Question

I have following html page :

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <script src="scriptAssign.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController">
    <form ng-submit="submitForm()" method="POST">
      ATTID :
      <input type="text" name="firstName" ng-model="myForm.firstName">
      <br/> Role :
      <select ng-model="selectedRole" ng-options="myForm.roleName for myForm in role"></select>
      <br/>
      <input type="submit" id="submit" value="Submit" />
    </form>
    <div>
      {{myForm.firstName}} {{selectedRole.roleName}}
    </div>
  </div>

  <script>
  </script>

</body>

</html>

My javascript file is as follows :

angular.module("myapp", [])
.controller("MyController", ['$scope', '$http', function($scope, $http) {
    $scope.myForm = {};
    $scope.role = [{ roleName :"A"},{roleName : "B"},{ roleName : "C"}];
    $scope.submitForm = function() {
        $http.post('/services/poc/add').success(function(data) {
            $scope.myData = data;
        });
    }
}]);

i am getting error as

HTTP Status 400 - type Status report message description The request sent by the client was syntactically incorrect. Apache Tomcat/7.0.32

also change ng-model="selectedRole" to ng-model="myForm.selectedRole" — Hadi
– Hadi, Commented Apr 18, 2017 at 15:27
are you really using angular 1.2.5 in your app? That version was last updated in October, 2015. — Claies
– Claies, Commented Apr 18, 2017 at 15:34

SteamDev · Accepted Answer · 2017-04-18 15:32:24Z

2

You're not sending a payload in your $http.post; your service is likely expecting one.

You might also want to adjust your ng-options and ng-model on that select.

HTML:

// use a different alias (r) instead of 'myForm' for defining options
<select ng-model="myForm.selectedRole" ng-options="r.roleName for r in role"></select>

JS:

    $http.post('/services/poc/add', $scope.myForm).success(function(data) {
        $scope.myData = data;
    });

answered Apr 18, 2017 at 15:32

SteamDev

4,4345 gold badges22 silver badges29 bronze badges

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

2 Comments

Utkarsh Saraf Over a year ago

If i have 1000 fields in my form,so this alias "myForm" actually helps in retrieving the values of field.Is this why we define alias.just curious as i am new to angularjs.

SteamDev Over a year ago

The only reason I suggested a different alias is because myForm was already being used as the model for collecting your form inputs (i.e. ng-model="myForm.firstName"). r on the other hand is just an arbitrary iterator scoped to that particular ng-options statement; lessens your chance of causing an unexpected conflict.

Nick Brady · Accepted Answer · 2017-04-18 15:33:25Z

0

I don't know what your API looks like, so it is hard to say; however, the data you POST needs to be a parameter to the post method.

$http.post('/services/poc/add', $scope.dataToPost).then(
  function(response) {
    console.log("Success!");
  },
  function(error) {
    console.log("Something went wrong!");
  });

Remember that the posting happens by the method post, which just returns a promise you're tapping into with then. The success callback is the code that gets executed when the response is successfully returned.

Here are the docs - angular's are pretty good: https://docs.angularjs.org/api/ng/service/$http#post

edited Apr 18, 2017 at 15:33

answered Apr 18, 2017 at 15:24

Nick Brady

6,6323 gold badges51 silver badges75 bronze badges

4 Comments

Utkarsh Saraf Over a year ago

So if i have to attach the fields in place of $scope.data in argument of $http.post,what i would have to do?

Nick Brady Over a year ago

Like I said, I don't know anything about your API so I can't really say. If it is an object (e.g. var data = {fruit: "apple", name: "Nick"} you could post that by passing the parameter to POST like $http.post('/services/poc/add', data). Or even $http.post('/services/poc/add', {fruit: "apple", name: "Nick"})

Nick Brady Over a year ago

@UtkarshSaraf looking more closely at the question, it looks like SteamDev answered the question. myForm is an object, so you'd pass it in like I did in my above comment (as steamDev did). you should accept his answer.

Utkarsh Saraf Over a year ago

ohh..yes.actually at time of asking this question,that was not visible in my post.Will surely accept it.Thanks Nick for highlighting.

Collectives™ on Stack Overflow

POST data using AngularJS

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related