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

Question

我正在使用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); });

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

Answer 1

我想到了！ @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); });

感谢您的帮助！

Answer 2

首先，您应该了解一些http基本知识，然后您将知道自己在做什么，然后，您将知道如何正确地进行操作：

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

  request.body

将始终为空。

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

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

• 如果你想发送一些数据通过GET方法的服务器，但你不希望使用的查询字符串，你可以做一些黑客用HTTP标头的HTTP主体。

Answer 3

确保您的范围内有一个term属性。

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" />