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


76

如何在Angularjs中使用查询参数构建URL。

我看到了API $ location.search()

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

网址:/a/b/c params:{field1: value1, field2: value2}

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

我喜欢使用此URL进行链接。我也见过角度编码?&字符。我可以避免吗?

编辑:

我的意图是将URL用作锚元素的href。我确实使用$ http发送请求,但有时我需要提供一个链接,其中包含查询参数(基于当前对象)

谢谢


1
接下来我们将介绍与一般的JS(无角)的问题 stackoverflow.com/questions/111529/...
V-TEC

我很难相信仍然需要外部库。.JavaScript中有一个完整的DOM API,但是对此一无是处。Javascript太疯狂了!
guy mograbi

您愿意接受答案吗?
Armel Larcier

Answers:


124

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

var qs = $httpParamSerializer(params);

在这里查看文档

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

{'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()使用复杂的查询参数进行测试时非常有用
Guillaume16年


3

相信您确实是在树错误的树...您需要看一下$ http服务,它为您提供$ http.get(url,config)或$ http.post(url,data,config)。对于带有参数的GET请求,请参见以下内容

$ http获取参数不起作用

有关$ http及其工作方式的信息,请参阅Angular文档。

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

也许我对目标有误解,但您实际上想导航到其他地方,我在这里建议的只是在后台发出请求(AJAX样式)。

http://jsfiddle.net/4ZcUW/

JS

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>

这对您的情况有用吗?


2
我的意图是将urlas href用作锚元素。我确实使用$ http发送请求,但有时我需要提供一个链接,其中包含查询参数(基于当前对象)
bsr

@bsr:我不知道角度,但是您确定编码不是将生成的URL作为HTML树的一部分看到的产物(例如,“&”号需要进行编码,以避免被误认为是初始字符)实体)?
liori 2013年

嗯,在这种情况下,也许您想使用$ window来使用浏览器提供的打开功能,而不是通过Angular的$ location进行操作,因为这与路由有关,而不仅仅是导航(作为命名位置,您认为它可以导航但我不太确定)docs.angularjs.org/api/ng.$window不确定如果我看不到答案,我会摆弄这个。
shaunhusain 2013年

@liori你是对的。仅当您单击链接时才会显示编码的url(如果重定向不是通过$ location.search(),而是通过手动构造的href字符串)。这也相关。stackoverflow.com/questions/15197837/...
BSR

0

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

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

如果是外部链接,则$ http是您想要的。

如果它是内部链接,则检查它可能值得检查哈希/爆炸语法。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.