使用 AngularJS $location 从 URL 中的查询字符串获取值

IT技术 javascript angularjs
2021-01-16 19:23:35

关于$location.search文档说,

不带任何参数调用时,返回当前 url 的搜索部分(作为对象)。

在我的 URL 中,我的查询字符串有一个?test_user_bLzgB没有值的参数$location.search()返回一个对象。我如何获得实际文本?

6个回答

不确定自接受的答案被接受以来它是否已经改变,但这是可能的。

$location.search()将返回一个键值对对象,与查询字符串相同。没有值的键只是作为真存储在对象中。在这种情况下,对象将是:

{"test_user_bLzgB": true}

你可以直接访问这个值 $location.search().test_user_bLzgB

示例(具有更大的查询字符串):http : //fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

注意:由于哈希(因为它会转到http://fiddle.jshell.net/#/url,这会创建一个新的小提琴),这个小提琴在不支持 js 历史的浏览器中不起作用(将不起作用在 IE <10)

编辑:
正如@Naresh 和@DavidTchepak 在评论中指出的,$locationProvider还需要正确配置:https : //code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

感谢您的灵感和有用的提示,请分享我的案例。我创建了一个名为 userConfig 的常量并将所有内容放入其中,为了用户的灵活性,可以通过查询字符串覆盖某些设置。我使用它并将查询放在 HTML 标记中的 globalController 范围变量中,以便任何子控制器都可以采用包括服务在内的参数。因为userConfig也是放在Service中的。所以实际上,他们可以一起互动。
2021-03-22 19:23:35
@TheSharpieOne 如果你有时间可以看看这个问题吗?stackoverflow.com/questions/43121888/...
2021-03-24 19:23:35
要配置位置提供程序,您需要: window.app.config ['$locationProvider', ($locationProvider) -> $locationProvider.html5Mode true ] 您还需要在 HTML 文件中添加一个基本标签:<base href="/">
2021-03-26 19:23:35
我发现只使用 js 函数更容易,$location.search() 有很多活动部分。有很多代码示例可用于获取查询字符串参数。
2021-03-26 19:23:35
正如 Naresh 所提到的,$locationProvider还需要正确配置:code.angularjs.org/1.2.23/docs/guide/...(这让我绊倒了。希望该链接可以为其他人节省一些时间。)
2021-03-29 19:23:35

如果您只需要将查询字符串视为文本,则可以使用: $window.location.search

如果您检查时间戳,则会在 Dan 发表评论后 2 小时编辑答案。这真的不是那么重要,但我发现 leo 的评论被点赞让我感到震惊,所以我想我会指出这一点。
2021-04-09 19:23:35
这怎么不是答案?也许它有点短,但它似乎确实回答了这个问题。
2021-04-14 19:23:35

$location.search()返回一个对象,由作为变量的键和作为其值的值组成。所以:如果你这样写你的查询字符串:

?user=test_user_bLzgB

你可以很容易地得到这样的文本:

$location.search().user

如果您不想使用键值,例如 ?foo=bar,我建议使用哈希 #test_user_bLzgB ,

并打电话

$location.hash()

将返回“test_user_bLzgB”,这是您希望检索的数据。

附加信息:

如果您使用了查询字符串方法,并且使用 $location.search() 获得了一个空对象,则可能是因为 Angular 使用的是 hashbang 策略而不是 html5 策略...要使其正常工作,请将此配置添加到您的module

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);

首先使 URL 格式正确以获取查询字符串使用对我有用的#?q=string

http://localhost/codeschool/index.php#?foo=abcd

将 $location 服务注入控制器

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

所以输出应该是abcd

你也可以使用这个

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');
您已经从另一个 SOF 答案中复制了该功能...最好参考您的来源。
2021-04-08 19:23:35
是的,这就是我使用的,从 SO 上的某个地方得到的
2021-04-08 19:23:35