从参数对象构建查询字符串答案

【问题标题】：Build query string from parameters object从参数对象构建查询字符串
【发布时间】：2013-09-11 00:44:03
【问题描述】：

如何在 Angularjs 中构建带有查询参数的 url。

我看到了 API $location.search()

问题是 $location(url) 是重定向到 url。就我而言，我想为查询参数传递一个 url 和 key:value 对并构建 url。像

网址：/a/b/c 参数：{field1: value1, field2: value2}

结果：/a/b/c?field1=value1&field2=value2

我喜欢用这个 url 链接。我还看到了角度编码 ? ， & 字符。我可以避免这种情况吗？

编辑：

我的意图是使用 url 作为锚元素的 href。我确实使用 $http 来发送请求，但有时我需要提供一个链接，带有查询参数（基于当前对象）

谢谢

【问题讨论】：

以下涵盖了一般 JS（无 Angular）stackoverflow.com/questions/111529/… 的问题
我很难相信外部库仍然是必需的。JavaScript 中有一个完整的 DOM API，但没有什么可做的......太棒了！ Javascript is crazy!
您愿意接受答案吗？

标签： javascript angularjs querystringparameter

【解决方案1】：

相信你真的是在叫错树......你需要看看 $http 服务，它给你 $http.get(url, config) 或 $http.post(url, data, config ）。对于带有参数的 GET 请求，请参阅以下 SO

$http get parameters does not work

有关 $http 及其工作原理的信息，请参阅 Angular 文档。

http://docs.angularjs.org/api/ng.$http

也许我误解了目标，而您实际上想要导航到不同的地方，我在这里建议只是在后台发出请求（AJAX 样式）。

http://jsfiddle.net/4ZcUW/

angular.module("myApp", []).controller("MyCtrl", ["$scope", "$window", function($scope, $window) {
    $scope.goPlaces = function(url, parameter) {
        $window.open("http://www."+url+"?q="+parameter);
        //$window.open("http://www."+url+"?q="+parameter, "_self");
        //$window.open("http://www."+url+"?q="+parameter, "_top");
    };
}])

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <a href="#" ng-click="goPlaces('google.com','Shaun Husain')">Find me</a>
</div>

这对你的情况有用吗？

【讨论】：

我的意图是使用url 作为锚元素的href。我确实使用 $http 发送请求，但有时我需要提供一个链接，带有查询参数（基于当前对象）
@bsr：我不知道角度，但您确定编码不是您将生成的 URL 视为 HTML 树的一部分的方式的产物（例如，需要对 & 符号进行编码以免被误认为是实体的初始字符）？
嗯，在这种情况下，也许您想使用 $window 来使用浏览器提供的打开功能，而不是通过 Angular 的 $location，因为这与路由有关，而不仅仅是导航（命名为 location你会认为它可以导航，但我不太确定）docs.angularjs.org/api/ng.$window 不确定如果我看不到答案，我会在小提琴中玩弄这个，我会发布它。
@liori 你是对的。编码的 url 只有在您点击链接时才会显示（如果重定向不是通过 $location.search()，而是通过手动构建的 href 字符串）。这也有关系。 stackoverflow.com/questions/15197837/…

【解决方案2】：

angular 的内部和外部 URL 格式化规则略有不同。

$location 是在您自己的应用程序中激活内部路由的一种方式。

如果是外部链接，那么 $http 就是你想要的。

如果它是一个内部链接，那么检查一下它可能值得检查一下 hash/bang 语法。

【讨论】：

【解决方案3】：

Angular 在内部使用buildUrl() 函数从参数对象生成查询字符串。目前不可能在你的代码中使用它，因为它是 $HttpProvider 私有的，除非你想做一些 eval() 魔法。

github上的相关问题：

【讨论】：

【解决方案4】：

从 1.4+ 开始就有一个不错的解决方案。您可以使用 $httpParamSerializer 从参数对象构建查询字符串：

var qs = $httpParamSerializer(params);

See docs here

将对象转换为字符串的默认 $http 参数序列化程序根据以下规则：

{'foo': 'bar'} results in foo=bar
{'foo': Date.now()} results in foo=2015-04-01T09%3A50%3A49.262Z (toISOString() and encoded representation of a Date object)
{'foo': ['bar', 'baz']} results in foo=bar&foo=baz (repeated key for each array element)
{'foo': {'bar':'baz'}} results in foo=%7B%22bar%22%3A%22baz%22%7D" (stringified and encoded representation of an object)
Note that serializer will sort the request parameters alphabetically.

【讨论】：

在使用带有复杂查询参数的$httpBackend.expectGET() 进行测试时非常有用