angularjs $http.post 带参数答案

【问题标题】：angularjs $http.post with parametersangularjs $http.post 带参数
【发布时间】：2015-10-26 20:58:25
【问题描述】：

我是 Angular 的新手，如果我的问题有点低，请不要生我的气。

如果用户通过身份验证，我有返回 sessionId 和登录成功消息的 Web 服务。例如网址是：

http://localhost:8181/login?username=USERNAME&password=12345

这是我的回应：

{"sessionId":"0997cec2a8b34c84ba8419ab1204e6aa","loginSucceeded":true}

这是我的登录控制器：

app.controller('loginCtrl', function($scope, loginService){
    $scope.login=function(user){
        loginService.login(user);
    }
});

这是我的服务：

app.factory('loginService', function($http){
    return{
        login: function(user){
            var $promise=$http.post('http://localhost:8181/login?', user);
            $promise.then(function(msg){
                if(msg.loginSucceeded=="true")
                    console.log("opa")
                else
                    console.log("den");
            });
        }
    }
});

我的范围内有 user.username 和 user.password（使用文本框）。

如何在 url 中传递这些参数以及如何解析该响应？

【问题讨论】：

您可以使用字符串连接将它们附加到 url。
@toskv 好的，明白了。那么解析响应呢？
通常响应有一个 data 字段，其中包含服务器发送的已解析信息（假设服务器使用 JSON 或字符串响应）。
如果后端有 REST 控制器，您可以将它们连接为字符串，或者将它们作为对象作为 $http.post 中的第二个参数传递

标签： javascript angularjs

【解决方案1】：

在您的代码中，您在 POST 请求的 URL 中传递用户名和密码。如果这是您真正想要的（将它们作为 POST 数据传递更常见），则可以使用：

login: function(user){
    var url = 'http://localhost:8181/login?username=' + user.name + '&password=' + user.password;
    $http.post(url).then(function(msg){
        if(msg.loginSucceeded==="true"){
            console.log("opa")
        }else{
            console.log("den");
        }
    });    
}

如果您想将数据作为 POST 数据传递，您可以将其作为 $http.post() 调用中的第二个参数传递：

login: function(user){
    var url = 'http://localhost:8181/login';
    var data = {username: user.name, password: user.password};
    $http.post(url, data).then(function(msg){
        if(msg.loginSucceeded==="true"){
            console.log("opa")
        }else{
            console.log("den");
        }
    });
};

【讨论】：

谢谢，但它会抛出异常“ReferenceError: $scope is not defined”
对不起，我误读了你的问题。我看到：我的范围中有 user.username 和 user.password，所以我直接使用范围。我没有看到您正在使用服务来拨打电话。我已经更新了我的答案。

【解决方案2】：

我从未见过有人通过查询字符串传递登录数据，如果您使用简单的 http 协议...您应该考虑使用 Basic Access Authentication 或 oAuth...

顺便说一句，如果您需要执行上述操作...这可能会对您有所帮助！

angular
  .module('test', [])
  .service('LoginService', function($q, $http) {
    var self = this;
  
    self.login = function(username, password) {
      var configs = { cache: false };
      var payload = {
        "username" : username,
        "password" : password
      };
      
      // The Method Post is generally used with a payload, but if you need to pass it as query string... you have to do:
      configs.params = payload;
      return $http
        .post('/api/login', null /* but normally payload */, configs)
        .then(function(result) { 
          console.log('LoginService.login:success', result); 
          return result.data;
        })
        .catch(function(error) {
          console.log('LoginService.login:error', error);
          return $q.reject(error);
        });
      ;
    };
  })
  .controller('LoginCtrl', function(LoginService, $scope) {
    var vm = $scope
    vm.username = 'hitmands';
    vm.password = 'helloWorld';
    vm.debug = 'CIAO';
  
    vm.onFormSubmit = function(event, form) {
      if(form.$invalid) {
        event.preventDefault();
        return;
      }
      
      vm.debug = null;
      
      return LoginService
      .login(vm.username, vm.password)
      .then(function(data) { vm.debug = data; })
      .catch(function(error) { vm.debug = error; })
    ;
      
    };
  })
;

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

<article ng-app="test">
  <div ng-controller="LoginCtrl">
    <form ng-submit="onFormSubmit($event, loginForm);" name="loginForm">
      <input type="text" placeholder="username" ng-model="username">
      <input type="password" placeholder="Password" ng-model="password">
      <div>
        <button type="submit">Send Login Data</button>
      </div>
      
      <div style="color: blue; padding: 1em .5em;" ng-bind="debug | json">
      </div>
    </form>
  </div>
</article>

【讨论】：