如何使用 AngularJS 中的一些数据进行 $http GET？

Posted 2023-02-22

【中文标题】如何使用 AngularJS 中的一些数据进行 $http GET？

【英文标题】：How to do a $http GET with some data in AngularJS?

【发布时间】：2015-11-18 10:04:28

【问题描述】：

我想向我的后端发出 Get 请求，但我想在发送响应对象之前验证一些用户凭据。

这是我的代码：

$scope.getEverything = function ()
    $http.get('http://localhost:1234/things').success(function(data)
        $scope.things = data;
    );
;

我尝试过使用以下语法的相同代码：

$http.method('path).then
$http.method(config)

我只是不知道如何传递一些数据。尝试使用 params:data 作为打印输出的配置对象：

GET http://localhost:1234/[object%20Object] 404（未找到）

在控制台上。

AngularJS 文档没有提及使用 GET 请求发送数据。我也尝试过 Stack 的一些答案，但大多数都已经过时并且无法正常工作。

我可以使用 GET 请求发送数据吗？或者这只是我的应用程序的一个设计错误？

【参考方案1】：

您很可能需要使用 POST 方法而不是 GET 方法。

但要使用 GET 方法：

来自AngularJS passing data to $http.get request：

HTTP GET 请求不能包含要发布到服务器的数据。 但是，您可以在请求中添加查询字符串。

angular.http 为其提供了一个选项参数。

$http(
     url: user.details_path, 
     method: "GET",
     params: user_id: user.id  
);

并使用AngularJS 来代替 POST：

$http.post('/someUrl', msg:'hello word!').
  then(function(response) 
    // this callback will be called asynchronously
    // when the response is available
  , function(response) 
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  );

【讨论】：

你为什么将 jQuery $.ajax 注入到一个角度问题中？ angular 有它自己的 ajax api

为了清楚起见，我将两者都包括在内

如果 AngularJS 到位，我认为不应该直接使用 jquery，因为这将强制使用 $scope.$apply 并且还会破坏 angular 的可测试性（使 Protractor 停止等待请求结束）

我对其进行了修改，使其成为 100% Angular

好的，我将使用 POST 请求。我正在使用带有 Express 的 Node，并且我已经尝试使用 POST 请求来获取基于 req.body 的过滤数据。然后，我使用 res.json(obj) 将数据返回到客户端。谢谢你。我只是希望使用“正确”的方法词。

【参考方案2】：

对于$http.get 请求，请使用配置对象的params 属性

$http.get(url, params: foo:'bar').then(func....

请参阅$http docs

Usage

部分中的

Arguments

表

【参考方案3】：

如果您想使用 GET 方法传递一些数据，您可以在 $http 服务的 get 方法上传递参数选项。这将是 urlencode 参数

$http.get(url, 
  params: 
    query: 'hello world'
  
 

或

$http(
   url: url,
   method:'GET',
   params: 
     query:'Hello World'
   
)

但是，http 标准定义了将数据发送到服务器的 POST 方法。 GET 只是从中获取数据。关于角度的 post 方法：

$http(
  url: url,
  method:'POST',
  data: 
    query: 'Hello World'
  
)

检查来自GET 和POST 的official docs

【讨论】：

谢谢。但我不想使用查询参数。 ：/我要和POST一起去。谢谢。

Post 是将数据发送到服务器的正确方式，get 参数是将数据附加到请求的 url。 exp: url?query=helloworld&otherparam=23。它的目的是细化请求选项。不向服务器发送数据。

【参考方案4】：

试试

var req = 
 method: 'GET',
 url: 'http://localhost:1234/things',
 data:  test: 'test' 


$http(req).then(function()..., function()...);

【参考方案5】：

正如@charlietfl 提到的，根据文档，您可以这样做来实现下载加载/总进度：

 $http.get(url,  
     eventHandlers: 
         'progress': function(evt) 
             $window.console.log(evt.loaded + '/' + evt.total);
         
     
  ).then(function(response)  ...