使用AngularJS POST数据

时间:2017-04-18 15:19:58

标签: html angularjs

我有以下html页面:

<!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>

我的javascript文件如下:

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;
        });
    }
}]);

我收到错误

HTTP状态400 - 键入状态报告消息 description客户端发送的请求在语法上是不正确的。 Apache Tomcat / 7.0.32

2 个答案:

答案 0 :(得分:2)

您未在$http.post中发送有效负载;你的服务很可能是期待的。

您可能还想调整该选择中的ng-optionsng-model

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;
    });

答案 1 :(得分:0)

我不知道你的API是什么样的,所以很难说;但是,您POST的数据必须是post方法的参数。

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

请记住,通过方法post进行发布,这只会返回您当时正在使用的承诺。成功回调是成功返回响应时执行的代码。

以下是文档 - 角度非常好:https://docs.angularjs.org/api/ng/service/ $ http#post