AngularJS:获取链接中没有哈希的查询字符串值
AngularJS: Get query string values without a hash in the link
我正在尝试使用angularjs获取查询字符串值。
我的Url:http://localhost/example.php?sportsId=3
当我应用var goto = $location.search()['sportsId'];
时它返回未定义的我。
但是,如果我在类似Url: http://localhost/example.php#?sportsId=3
的url中添加散列
那么它返回给我正确的值3。
但在这种情况下,它也给了我Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D
此外,我的默认$_REQUEST['sportsId']
不适用于哈希格式。
如何使用angularjs从查询字符串中正确获取值?
我知道这不是Angular,而是它的纯JS,工作起来很有魅力(只是不要添加dummyPath,它会占用URL)。
function getUrlParameter(param, dummyPath) {
var sPageURL = dummyPath || window.location.search.substring(1),
sURLVariables = sPageURL.split(/[&||?]/),
res;
for (var i = 0; i < sURLVariables.length; i += 1) {
var paramName = sURLVariables[i],
sParameterName = (paramName || '').split('=');
if (sParameterName[0] === param) {
res = sParameterName[1];
}
}
return res;
}
用法:
var sportdsId = getUrlParameter('sportsId');
完成任务的三个简单步骤:
-
通过向控制器/服务添加以下代码,为HTML5模式配置angular:
app.config(['$locationProvider',function($locationProvider){$locationProvider.html5Mode(true);}]);
-
将基本元素添加到HTML:
<base href="/">
-
将"$location"注入您的角度控制器:
app.controller('ABCController',['$scope','$location',ABCController]);
最后要获得查询字符串,请使用以下代码:
var yourId = $location.search().yourId;
答案已经在前面的答案中了,我只是总结了一下,以便更好地理解。希望有人能从中受益。
请参阅以下链接
var goto = $location.search().sportsId;
使用AngularJS$location 从url中的查询字符串中获取值
这就是我使用的。它本质上与接受的答案相同,但将所有参数作为对象返回,并处理url组件的解码。
function getUrlParameters() {
var pairs = window.location.search.substring(1).split(/[&?]/);
var res = {}, i, pair;
for (i = 0; i < pairs.length; i++) {
pair = pairs[i].split('=');
if (pair[1])
res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
}
return res;
}
您需要使用
$location.search()
这会返回一个带有params的对象,所以假设您有url?param1=val¶m2=val2
这将返回以下
{ param1 : val, param2 : val2 }
还要确保启用
$locationProvider.html5Mode(true);
使用以下命令从$window.location.search
属性创建自己的搜索对象:
var search = $window.location.search
.split(/[&||?]/)
.filter(function (x) { return x.indexOf("=") > -1; })
.map(function (x) { return x.split(/=/); })
.map(function (x) {
x[1] = x[1].replace(/'+/g, " ");
return x;
})
.reduce(function (acc, current) {
acc[current[0]] = current[1];
return acc;
}, {});
var sportsId = search.sportsId;
或者创建一个可以在任何地方使用的queryString
工厂。。这组合了queryString的左右部分。。即#
之前和#
之后
(function () {
"use strict";
angular
.module("myModuleName")
.factory("queryString", QueryStringFactory);
function QueryStringFactory($window, $location) {
function search() {
var left = $window.location.search
.split(/[&||?]/)
.filter(function (x) { return x.indexOf("=") > -1; })
.map(function (x) { return x.split(/=/); })
.map(function (x) {
x[1] = x[1].replace(/'+/g, " ");
return x;
})
.reduce(function (acc, current) {
acc[current[0]] = current[1];
return acc;
}, {});
var right = $location.search() || {};
var leftAndRight = Object.keys(right)
.reduce(function(acc, current) {
acc[current] = right[current];
return acc;
}, left);
return leftAndRight;
}
return {
search: search
};
}
}());
用法:
var qs = queryString.search();
var sportsId = sq.sportsId;
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- AngularJS:获取链接中没有哈希的查询字符串值
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 如何在浏览器重新加载时保存位置哈希状态
- jQuery scrollTop-哈希错误
- 动态添加哈希标记;t工作
- 在Javascript中实现对哈希值的暴力攻击
- 如何在JavaScript/Node中计算SHA256哈希和Base64字符串编码
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- jQuery将查询参数附加到当前哈希中,忽略重复项
- 将查询字符串放在 angularjs 应用程序中的哈希之后
- 基于哈希或查询字符串加载动态内容
- 已解决查询(关于哈希表)中的解决方案给了我 NaN
- Angular UI路由器将查询字符串放在哈希之前
- 如何使用javascript从url获取查询和哈希
- 如何正确地添加搜索查询参数,以url包含哈希在javascript
- Regex-获取不带哈希的查询字符串
- Angular js - 当 url 具有 # 哈希时获取 url 查询参数
- 查询dynamoDB的关键条件'GE'在哈希键上