使用 AngularJS 的 $http 服务通过 GET 请求发送数组答案

【问题标题】：Send array via GET request with AngularJS' $http service使用 AngularJS 的 $http 服务通过 GET 请求发送数组
【发布时间】：2013-11-13 15:32:57
【问题描述】：

我需要使用$http 服务发送一个GET 请求。其中一个参数将是一个 id 数组。网址看起来像这样 mysite.com/items?id[]=1&id[]=2&id[]=3&id[]=4

我试过这种方法

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids // ids is [1, 2, 3, 4]
  }
)

但我获得的网址是 mysite.com/items?id=%5B%221%22%2C%222%22%2C%223%22%2C%224%22%5D

那是因为 Angular 将我的值转换为 JSON 字符串。有没有办法获得我想要的行为？

[更新]

感谢 Jonathan 的建议，我使用 jQuery 的 $.param() 解决了这个问题。

$http(
  method: 'GET'
  url: '/items?' + $.param({id: ids})
)

【问题讨论】：

如果您面临 AngularJS 特定的序列化问题，那么 httpParamSerializerJQLike 就是您所需要的。看看stackoverflow.com/questions/33852190/…

标签： javascript http angularjs angular-http

【解决方案1】：

你也可以这样做

$http(
  method: 'GET',
  url: '/items',
  params: {
    "id[]": ids // ids is [1, 2, 3, 4]
  }
)

如上所述here。看起来更简单。

【讨论】：

我喜欢这种方法，因为在后端（例如PHP），参数自动解析为数组，避免了解码JSON的额外代码步骤。
这是与 PHP 通信的最简单方法。它给出的结果与标准 form 相同。
最好的答案。我可以使用 Node 在后端操作 body of the request。
这仅适用于我的 WebApi2 服务器，因为我像这样装饰了数组参数：public HttpResponseMessage MyMethod([FromUri] int[] IDs)

【解决方案2】：

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: JSON.stringify(ids) // ids is [1, 2, 3, 4]
  }
)

【讨论】：

我比我更喜欢这个答案。
到目前为止，这些方法似乎都不适用于 WebApi 后端。尝试了 JSON.stringify，'myvariable[]'，接下来尝试手动加入字符串
这对我也不起作用。也有我自己的 Web API 后端。你得到它了吗@SonicSoul
这不会发送格式为 /items?id[]=1&id[]=2&id[]=3&id[]=4

【解决方案3】：

jQuery 很棒，但如果您只是为此添加 jQuery，那么您可能会使用非 jQuery 方式并节省一些宝贵的字节。

非jQuery方式：

$http(
  method: 'GET',
  url: '/items',
  params: {
    id: ids.toString() //convert array into comma separated values
  }
)

在您的服务器上将其转换回数组。

例如。在php中

$ids = explode(',',Input::get('ids'));

//now you can loop through the data like you would through a regular array. 

foreach($ids as $id)
{
 //do something
}

【讨论】：

ids.toString() 正是我想要的。其他建议没有以我需要的格式将其序列化为一个正确的查询参数：?id=1,3,4,5
@stensrud 这个问题专门讨论了一个整数 id 数组。

【解决方案4】：

这是有效的，只需在您的后端解码即可。几乎所有后端语言都有解码 URI 的方法。如果你不喜欢 Angular 序列化它的方式，你可以试试 jquery 的 $.param()。

【讨论】：

我知道它是有效的，我只是想避免转换。
$.param() 解码后应该会给你一个稍微不同的结构，更像你想要的。您不能不对 URI 进行编码，这不是可选的。如果你不这样做，浏览器就会这样做。
是的，$.param() 是正确的，它正在工作。感谢您的帮助。

【解决方案5】：

The paramSerializer option can be set to replicate jQuery's serialization method:

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});

【讨论】：

【解决方案6】：

您可以使用 $httpParamSerializer 或 $httpParamSerializerJQLike

$http({
  method: 'GET',
  url: '/items',
  data: $httpParamSerializer({'id':[1,2,3,4]}),
})

【讨论】：

除非你使用例如CoffeeScript，这是无效的 JS。您的意思是省略{} 大括号吗？

【解决方案7】：

只要你没有太多的id，会导致你的请求url太长，具体取决于你的配置，下面的解决方案就可以了……

角度服务：

$http.get("website.com/api/items?ids=1&ids=2&ids=3");

WebApi 控制器

[HttpGet, Route("api/items")]
public IEnumerable<Item> Get([FromUri] string[] ids)
{
}

【讨论】：