下面是关于“JS获取Get值的方法”的完整攻略:
在Web开发中,我们常常需要通过URL传输数据。传输的方式有两种,一种是GET
请求,另一种是POST
请求。其中,GET
请求通常用于获取数据,POST
请求则通常用于提交数据。在GET
请求中,数据是通过URL传递的,因此可以通过解析URL中的参数来获取数据。
在JavaScript中,可以通过location.search
属性来获取URL中的查询字符串,查询字符串一般包含了通过GET
请求传递的数据。查询字符串以?
开头,后面跟着一系列的key=value
键值对,多个键值对之间用&
符号连接。
例如,在以下URL中:
http://www.example.com?name=张三&age=20
查询字符串为?name=张三&age=20
,其中name
和age
为两个键,对应的值分别为张三
和20
。
JavaScript可以通过以下代码来获取查询字符串:
let search = location.search;
console.log(search); // 输出:?name=张三&age=20
为了方便获取单个键值对的值,我们可以将查询字符串转换为JavaScript对象,通过对象的键名来获取对应的值。可以使用以下代码来实现:
function getQueryStringArgs() {
// 去掉查询字符串开头的?
let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
args = {},
items = qs.length ? qs.split("&") : [];
items.forEach(function(item, i) {
let itemArr = item.split("="),
name = decodeURIComponent(itemArr[0]),
value = decodeURIComponent(itemArr[1]);
if (name.length) {
args[name] = value;
}
});
return args;
}
上面的函数将查询字符串转换为一个对象,并返回这个对象。使用时,可以通过对象的键来获取对应的值。例如,在以下URL中:
http://www.example.com?name=张三&age=20
可以使用以下代码来获取name
和age
的值:
let args = getQueryStringArgs();
console.log(args.name); // 输出:张三
console.log(args.age); // 输出:20
以下是两个获取GET
请求参数值的示例:
以下是一个具体的例子,假设URL为:
http://www.example.com/index.html?key1=value1&key2=value2
我们可以使用以下代码来获取参数值:
let args = {};
let query = location.search.substring(1); // 去掉?号
// 将参数分割成数组
let pairs = query.split('&');
// 提取每个键值对中的key和value,并将它们作为属性和属性值添加到args对象中
for (let i = 0; i < pairs.length; i++) {
let pos = pairs[i].indexOf('=');
if (pos === -1) continue;
let name = pairs[i].substring(0, pos);
let value = pairs[i].substring(pos + 1);
args[name] = value;
}
console.log(args.key1); // 输出:value1
console.log(args.key2); // 输出:value2
假设我们的URL为:
http://www.example.com/index.html?name=John&age=25
我们可以使用以下代码来获取参数值:
let params = new URLSearchParams(window.location.search);
let name = params.get('name');
let age = params.get('age');
console.log(name); // 输出:John
console.log(age); // 输出:25
以上就是获取GET
请求参数值的两个示例,希望对你有所帮助。
本文链接:http://task.lmcjl.com/news/10920.html