使用 AngularJS $location 从 URL 中的查询字符串获取值
[英]Getting values from query string in an URL using AngularJS $location
问题描述
Regarding $location.search , the docs say,
关于$location.search ，文档说，
Return search part (as object) of current url when called without any parameter.
In my URL, my query string has a param ?test_user_bLzgB without a value.在我的 URL 中，我的查询字符串有一个没有值的参数?test_user_bLzgB 。 Also $location.search() returns an object.另外$location.search()返回一个对象。 How do I get the actual text?我如何获得实际文本？
10 个解决方案
解决方案1
154 已采纳 2013-08-28 18:25:23
Not sure if it has changed since the accepted answer was accepted, but it is possible.不确定自接受的答案被接受以来它是否已经改变，但这是可能的。
$location.search() will return an object of key-value pairs, the same pairs as the query string. $location.search()将返回一个键值对对象，与查询字符串相同。 A key that has no value is just stored in the object as true.没有值的键只是作为真存储在对象中。 In this case, the object would be:在这种情况下，对象将是：
{"test_user_bLzgB": true}
You could access this value directly with $location.search().test_user_bLzgB您可以直接使用$location.search().test_user_bLzgB访问此值
Example (with larger query string): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse示例（具有更大的查询字符串）： http : //fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse
Note: Due to hashes (as it will go to http://fiddle.jshell.net/#/url , which would create a new fiddle), this fiddle will not work in browsers that do not support js history (will not work in IE <10)注意：由于哈希（因为它会转到http://fiddle.jshell.net/#/url ，这会创建一个新的小提琴），这个小提琴在不支持 js 历史的浏览器中不起作用（将不起作用在 IE <10)
Edit:编辑：
As pointed out in the comments by @Naresh and @DavidTchepak, the $locationProvider also needs to be configured properly: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration正如@Naresh 和@DavidTchepak 在评论中指出的那样，还需要正确配置$locationProvider ： https ://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration
解决方案2
49 2013-08-30 13:33:53
如果您只需要将查询字符串视为文本，则可以使用： $window.location.search
解决方案3
40 2014-07-29 02:51:12
$location.search() returns an object, consisting of the keys as variables and the values as its value. $location.search()返回一个对象，由作为变量的键和作为其值的值组成。 So: if you write your query string like this:所以：如果你这样写你的查询字符串：
?user=test_user_bLzgB
You could easily get the text like so:你可以很容易地得到这样的文本：
$location.search().user
If you wish not to use a key, value like ?foo=bar, I suggest using a hash #test_user_bLzgB ,如果您不想使用键值，例如 ?foo=bar，我建议使用哈希 #test_user_bLzgB ，
and calling并打电话
$location.hash()
would return 'test_user_bLzgB' which is the data you wish to retrieve.将返回“test_user_bLzgB”，这是您希望检索的数据。
Additional info:附加信息：
If you used the query string method and you are getting an empty object with $location.search(), it is probably because Angular is using the hashbang strategy instead of the html5 one... To get it working, add this config to your module如果您使用了查询字符串方法，并且使用 $location.search() 获得了一个空对象，则可能是因为 Angular 使用的是 hashbang 策略而不是 html5 策略...要使其正常工作，请将此配置添加到您的模块
yourModule.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true);
}]);
解决方案4
13 2015-02-09 21:04:43
First make the URL format correct for getting the query string use #?q=string that works for me首先使 URL 格式正确以获取查询字符串使用对我有用的#?q=string
http://localhost/codeschool/index.php#?foo=abcd
Inject $location service into the controller将 $location 服务注入控制器
app.controller('MyController', [ '$location', function($location) {
var searchObject = $location.search();
// $location.search(); reutrn object
// searchObject = { foo = 'abcd' };
alert( searchObject.foo );
} ]);
So the out put should be abcd所以输出应该是abcd
解决方案5
10 2015-02-12 09:23:55
you can use this as well你也可以使用这个
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');
解决方案6
10 2016-05-13 19:16:14
If your $location.search() is not working, then make sure you have the following:如果您的$location.search()不起作用，请确保您具有以下内容：
1) html5Mode(true) is configured in app's module config 1) html5Mode(true)在app的module config中配置
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
2) <base href="/"> is present in your HTML 2) <base href="/">存在于您的 HTML 中
<head>
<base href="/">
...
</head>
References:参考：
解决方案7
7 2013-06-06 15:06:19
Angular does not support this kind of query string. Angular 不支持这种查询字符串。
The query part of the URL is supposed to be a & -separated sequence of key-value pairs, thus perfectly interpretable as an object. URL 的查询部分应该是一个&分隔的键值对序列，因此可以完美地解释为一个对象。
There is no API at all to manage query strings that do not represent sets of key-value pairs.根本没有 API 来管理不代表键值对集的查询字符串。
解决方案8
0 2016-03-03 16:34:21
In my NodeJS example, I have an url "localhost:8080/Lists/list1.html?x1=y" that I want to traverse and acquire values.在我的 NodeJS 示例中，我有一个 url "localhost:8080/Lists/list1.html?x1=y"，我想遍历并获取值。
In order to work with $location.search() to get x1=y, I have done a few things为了使用 $location.search() 得到 x1=y，我做了一些事情
- script source to angular-route.js angular-route.js 的脚本源代码
- Inject 'ngRoute' into your app module's dependencies将“ngRoute”注入您的应用程序模块的依赖项
- Config your locationProvider配置您的 locationProvider
- Add the base tag for $location (if you don't, your search().x1 would return nothing or undefined. Or if the base tag has the wrong info, your browser would not be able to find your files inside script src that your .html needs. Always open page's view source to test your file locations!)添加 $location 的基本标签（如果不这样做，您的 search().x1 将不返回任何内容或未定义。或者，如果基本标签有错误的信息，您的浏览器将无法在脚本 src 中找到您的文件您的 .html 需要。始终打开页面的查看源来测试您的文件位置！）
- invoke the location service (search())调用定位服务（search()）
my list1.js has我的 list1.js 有
var app = angular.module('NGApp', ['ngRoute']); //dependencies : ngRoute
app.config(function ($locationProvider) { //config your locationProvider
$locationProvider.html5Mode(true).hashPrefix('');
});
app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
//var val = window.location.href.toString().split('=')[1];
var val = $location.search().x1; alert(val);
$scope.xout = function () {
datasvc.out(val)
.then(function (data) {
$scope.x1 = val;
$scope.allMyStuffs = data.all;
});
};
$scope.xout();
});
and my list1.html has我的 list1.html 有
<head>
<base href=".">
</head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>
Guide: https://code.angularjs.org/1.2.23/docs/guide/$location指南： https : //code.angularjs.org/1.2.23/docs/guide/$location
解决方案9
0 2017-03-16 03:12:21
My fix is more simple, create a factory, and implement as one variable.我的修复更简单，创建一个工厂，并作为一个变量实现。 For example例如
angular.module('myApp', []) // This a searchCustom factory. Copy the factory and implement in the controller .factory("searchCustom", function($http,$log){ return { valuesParams : function(params){ paramsResult = []; params = params.replace('(', '').replace(')','').split("&"); for(x in params){ paramsKeyTmp = params[x].split("="); // Si el parametro esta disponible anexamos al vector paramResult if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && paramsKeyTmp[1] !== null){ paramsResult.push(params[x]); } } return paramsResult; } } }) .controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){ $ctrl = this; var valueParams = searchCustom.valuesParams($routeParams.value); valueParams = valueParams.join('&'); $http({ method : "GET", url: webservice+"q?"+valueParams }).then( function successCallback(response){ data = response.data; $scope.cantEncontrados = data.length; $scope.dataSearch = data; } , function errorCallback(response){ console.log(response.statusText); }) })
<html> <head> </head> <body ng-app="myApp"> <div ng-controller="SearchController"> <form action="#" > <input ng-model="param1" placeholder="param1" /> <input ng-model="param2" placeholder="param2"/> <!-- Implement in the html code (param1={{param1}}¶m2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params --> <a href="#seach/(param1={{param1}}¶m2={{param2}})"> <buttom ng-click="searchData()" >Busqueda</buttom> </a> </form> </div> </body>
解决方案10
0 2020-12-07 07:00:33
Very late answer :( but for someone who is in need, this works Angular js works too :) URLSearchParams Let's have a look at how we can use this new API to get values from the location!很晚的答案:(但是对于有需要的人来说，这对 Angular js 也有效 :) URLSearchParams让我们看看我们如何使用这个新 API 从位置获取值！
// Assuming "?post=1234&action=edit"
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?
post=1234&action=edit&active=1"
FYI: IE is not supported仅供参考：不支持 IE
use this function from instead of URLSearchParams使用此函数 from 而不是URLSearchParams
urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
}
console.log(urlParam('action')); //edit
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.