【问题标题】:How to $http.post with payload in data?如何在数据中使用有效负载 $http.post?
【发布时间】:2014-09-05 02:41:45
【问题描述】:

如何在 AngularJS 中发布表单中的数据?

<form data-ng-submit="doSomething()">
    <input type="text" data-ng-input="do_obj.text"/>
    <input type="email" data-ng-input="do_obj.email"/>
    <input type="submit" value="Do something"/>
</form>
$scope.doSomething = function () {
        $http({url: '/api/oauth2/register', method: 'POST', data: $scope.do_obj}
        ).then(function (data, status, headers, config) {
                   $log.info("data = ", data, "status = ", status,
                             "headers = ", headers, "config = ", config);
               }
        );
};

Plnkr (bootstrap styled)

【问题讨论】:

  • 该死,毕竟这只是 WebStorm 的一个错误。通过 nginx 服务我的网站没有错误 >.

标签: angularjs angularjs-scope angularjs-service angularjs-controller angularjs-http


【解决方案1】:

见plunker代码here

将 data-ng-input 更改为 data-ng-model 并更新 data-ng-submit 以将模型传入范围控制器进行处理。

HTML:

<body data-ng-app>
        <div data-ng-controller="DoCtrl" class="container" style="margin: 15px">
            <form data-ng-submit="doSomething(do_obj)" role="form" class="form-inline">
                <div class="form-group">
                    <input type="text" data-ng-model="do_obj.bar"
                           placeholder="Enter text"
                    />
                </div>
                <div class="form-group">
                    <input class="form-group" type="email"
                           data-ng-model="do_obj.email"
                           placeholder="Enter email"
                    />
                </div>
                <div class="form-group">
                    <input class="btn btn-lg" type="submit"
                           data-ng-class="{'btn-info': hover}"
                           data-ng-mouseenter="hover = true"
                           data-ng-mouseleave="hover = false"
                           value="Do something"
                            />
                </div>
            </form>
        </div>
    </body>

发布的语法是 $http.post({url}, {payload});。我已经更新了你的控制器函数来接受一个参数来传递给帖子。

控制器代码:

function DoCtrl($scope, $http, $log) {
    $log.info("In DoCtrl");
    $scope.do_obj = {};
    $scope.doSomething = function (data) {
      $http.post('/api/oauth2/register', data)
        .success(function(successData){
          console.log(successData);
        });
    }
}

【讨论】:

  • 谢谢。哎呀,ng-input 一侧的错字。至于$http 方面,我想我可以将其作为“数据”对象发送……
  • 您可以将其作为数据对象发送。在控制器的 post 方法中,您可以将其发送为 $http.post('/api/oauth2/register', {data:data}) 。
  • 好的,那不应该使用更通用的$http({}) 语法吗?
猜你喜欢
  • 2019-09-25
  • 2022-08-17
  • 1970-01-01
  • 2011-04-19
  • 2019-07-08
  • 2021-08-13
  • 1970-01-01
  • 2022-12-18
  • 1970-01-01
相关资源
最近更新 更多