使用AngularJS $ http.get方法传递数据

时间:2015-07-23 12:06:28

标签: javascript angularjs http express mean-stack

我正在使用MEAN堆栈构建一个应用程序,该堆栈将利用从外部API检索的数据。作为隐藏API密钥的措施,我想从服务器发出API请求,但是我在将搜索项从Angular前端传递到服务器时遇到了问题。

下面的代码是Angular控制器的一部分,它应该将请求传递给带有搜索词的服务器:

myApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){
        $scope.submit = function(){
        $location.path('/results');
        $http({method: 'GET', url: '/makeSearch', data: {term: $scope.term} });
    }
}]);

然后以下服务器代码将使用body-parser中间件解析请求:

app.get('/makeSearch', function(req, res) {
console.log("I received a command!");
console.log(req.body); });

但是,一旦我尝试从前端传递/提交搜索词,我在服务器控制台上只获得一个空对象。关于我做错的任何提示?任何帮助,将不胜感激。

3 个答案:

答案 0 :(得分:3)

我明白了! @Rikky提出了一个很好的观点,即http get请求(req.body)的主体总是空的。因此,只需将req记录到控制台,我就可以计算出如何使用GET方法发送搜索词

在AngularJS控制器中的请求中使用params代替data,请参阅以下代码:

revApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){

$scope.submit = function(){
    console.log($scope.term);
    $location.path('/results');
    $http({method: 'GET',
        url: '/makeSearch',
        params: {term: $scope.term}
    });
} }]);

并在服务器上记录req.query而不是req.body,如下面的代码所示:

app.get('/makeSearch', function(req, res) {
console.log("I received a command!");
console.log(req.query); });

感谢帮助人员!

答案 1 :(得分:2)

首先你应该知道一些http基础知识,然后你知道自己在做什么,然后,你知道如何正确地做到这一点:

  • 使用HTTP GET方法意味着查询数据,而不是发送数据。因此,使用 GET 方法的HTTP请求将不具有正文,因此

    request.body

永远是空的。

  • 如果您确实想要向服务器发送一些数据,则首选使用 POST

  • 如果您仍想通过get将数据发送到服务器,则使用查询字符串是最佳选择。您可以在this问题

  • 上查看
  • 如果您想通过get方法向服务器发送一些数据,但是您不想使用查询字符串,则可以使用http标头而不是http来执行一些 hack 体。

答案 2 :(得分:0)

确保您的范围内有术语属性。

myApp.controller('mainController', ['$scope','$http', '$location', function($scope, $http, $location){

        $scope.term ='';

        $scope.submit = function(){
           $location.path('/results');
            $http({method: 'GET', url: '/makeSearch', data: {term:    $scope.term} 
            });
     }
}]);

确保您的UI具有绑定到范围的term属性的元素

<input type="text" ng-model="term" />