使用js获取QueryString的方法小结

最新推荐文章于 2024-05-10 09:47:57 发布
最新推荐文章于 2024-05-10 09:47:57 发布
阅读量3.4w 收藏 15
点赞数 1
分类专栏： javascript

一．<script>
urlinfo=window.location.href; //获取当前页面的url
len=urlinfo.length;//获取url的长度
offset=urlinfo.indexOf("?");//设置参数字符串开始的位置
newsidinfo=urlinfo.substr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串
newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割
newsid=newsids[1];//得到参数值
alert("您要传递的参数值是"+newsid);
< /script>

二．更好的方法：
声明一个queryString函数
<script type="text/javascript">
Request = {
QueryString : function(item){
var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i"));
return svalue ? svalue[1] : svalue;
}
}
< /script>

使用的时候像java一样调用就行了：
<script type="text/javascript">
document.write( Request.QueryString("name") );
< /script>

 

下面是另种方法:

本文原理是使用正则表达式匹配location.search中的字符串。其中三个主要函数为 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index)

三个主要方法：

 

方法

说明

getQueryString

获取QueryString的数组。

例如路径QueryStringDemo.html?id=5&type=1&flag=0

调用后返回["id=5", "type=1", "flag=0"]

getQueryStringByName

根据QueryString参数名称获取值

getQueryStringByIndex

根据QueryString参数索引获取值

 

复制代码 代码如下:

//获取QueryString的数组
function getQueryString(){
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
for(var i = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
return result;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
function getQueryStringByIndex(index){
if(index == null){
return "";
}
var queryStringList = getQueryString();
if (index >= queryStringList.length){
return "";
}
var result = queryStringList[index];
var startIndex = result.indexOf("=") + 1;
result = result.substring(startIndex);
return result;
}


测试页面路径：QueryStringDemo.html?id=5&type=1&flag=0
页面加载时：

在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值：

在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值（索引从0开始）：

这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<title>QueryString获取演示代码 www.jb51.net</title>
<script type="text/javascript">
//获取QueryString的数组
function getQueryString(){
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));
for(var i = 0; i < result.length; i++){
result[i] = result[i].substring(1);
}
return result;
}
//根据QueryString参数名称获取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根据QueryString参数索引获取值
function getQueryStringByIndex(index){
if(index == null){
return "";
}
var queryStringList = getQueryString();
if (index >= queryStringList.length){
return "";
}
var result = queryStringList[index];
var startIndex = result.indexOf("=") + 1;
result = result.substring(startIndex);
return result;
}
//绑定当控件高亮选中时，点击“回车键”时执行的操作
//control：要绑定事件的控件
//func：要执行的方法
function bindEnterEvent(control, func){
control.onkeypress = function(){
if (event.keyCode == 13){
func();
}
}
}
//根据输入的QueryString名称获取值
function getByName(){
var name = document.getElementById("txtQueryStringName").value;
document.getElementById("txtResult").innerHTML = getQueryStringByName(name);
}
//根据输入的QueryString的索引获取值
function getByIndex(){
var index = document.getElementById("txtQueryStringIndex").value;
document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index);
}
</script>
</head>
<body>
<div>
<span>QueryString : </span><span id="queryString"></span>
</div>
<div>
<span>QueryString's name : </span>
<input id="txtQueryStringName" name="txtQueryStringName" type="text" />
<input name="btnGetByName" type="button" value="获取" οnclick="getByName()" />
</div>
<div>
<span>QueryString's index : </span>
<input id="txtQueryStringIndex" name="txtQueryStringIndex" type="text" />
<input name="btnGetByIndex" type="button" value="获取" οnclick="getByIndex()" />
</div>
<div>
<span>结果 ：</span><span id="txtResult"></span>
</div>
<!--页面加载时执行的操作-->
<script type="text/javascript">
//显示所有QueryString
document.getElementById("queryString").innerHTML = getQueryString();
//为txtQueryStringName绑定回车事件
bindEnterEvent(txtQueryStringName, getByName);
//为txtQueryStringIndex绑定回车事件
bindEnterEvent(txtQueryStringIndex, getByIndex);
</script>
</body>
</html>

 

蓝色水
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
request.getQueryString()的作用
weixin_42722612的博客
07-23 2339
String queryString = request.getQueryString(); 上面这句话的意思是：获取查询字符串。 比如客户端发送 http://localhost/test.do?a=1&b=2&c=3 通过request.getQueryString()得到的是 a=1&b=2&c=3 API 中注释写到：...
QueryString.js解析地址的封装
三季雨
02-11 305
export default class QueryString { static hasOwnProperty(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } static stringifyPrimitive(v) { switch (type...
探索神秘的query-string：解析和构建URL查询字符串的利器
最新发布
gitblog_00016的博客
05-10 461
探索神秘的query-string：解析和构建URL查询字符串的利器 项目地址:https://gitcode.com/sindresorhus/query-string 在Web开发中，处理URL的查询字符串是常有的任务，query-string就是一个用于解析和串行化URL查询字符串的高效且易用的工具库。它由著名开发者Sindresorhus打造，受到了广泛的社区支持，并被多个大型项目采用。现...
URL参数值获取getQueryString
热门推荐
不死鸟的传说
11-06 2万+
目录 介绍 实现 讲解 获取 介绍 正常情况下的URL是这样的https://blog.csdn.net/sinat_33010325 这样的https://blog.csdn.net/sinat_33010325?a=1 还有这样的https://blog.csdn.net/sinat_33010325?a=1&amp;ab=2&amp;abc=3&amp;abcd=4 没错，...
js获取query 参数
Wangdr的博客
07-29 6929
var url="http://www.runoob.com/index.php?id=1&image=awesome.jpg"; function getQueryVariable(variable){ var str=url.split('?'); var query=query[1]; var vars=str.split('&'); console.log(query,str,vars); for (var i=0;i<vars
node.js中的querystring模块使用
ioszhanghui的博客
05-09 919
在HTTP的请求中，如果是get请求，经常会遇见参数使用，key1=value1&key2=value2这种形式，在node端如果要这些这种形式，想就需要使用querystring. 在项目中，使用npm install querystring安装这个模块。 querystring可以实现的功能，1)对字符串进行解析querystring.parse()，转化的是对象类型，2)对象类型...
JavaScript获取URL中参数querystring的方法详解
10-21
先给大家介绍了JavaScript获取URL中参数querystring的方法，而后有详解介绍了Location对象的属性和，Location对象的方法，对大家的理解很有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。
JavaScript实现QueryString获取GET参数的方法
10-27
本文为大家详细介绍下如何通过JavaScript实现QueryString获取GET参数，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
使用JavaScript获取Request中参数的值方法
10-21
下面小编就为大家带来一篇使用JavaScript获取Request中参数的值方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
QueryString.js
04-10
功能相当于Asp的Request("name"),如Request["name"]
getquerystring:浏览器querystring util
05-10
getquerystring JavaScript浏览器查询字符串 安装 npm i getquerystring 例子 //if href => https://github.com/sujkh85/?repositorie=getquerystring&test=777 import getQueryString from 'getquerystring'; getQueryString() /* return { repositorie:'getquerystring', test:777 } */
request.getQueryString()作用-获取URL参数
Code-Create-World
01-15 2万+
request.getQueryString()是什么意思   request.getQueryString()就是获取查询字符串比如客户端发送 http://localhost/test.do?a=b&c=d&e=f 通过request.getQueryString()得到的是 a=b&c=d&e=f 查API如下 Request.getQuery
html获取querystring,使用js获取QueryString的方法小结
weixin_28811227的博客
06-09 659
本文原理是使用正则表达式匹配location.search中的字符串。其中三个主要函数为 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index)三个主要方法：方法说明getQueryString获取QueryString的数组。例如路径QueryStringDemo.html?id=5&type=1&...
jquery 获取url 传递值－－Querystring.js
weixin_34367845的博客
01-06 327
<scriptsrc="../WFRes/Scripts/JQuery.js"type="text/javascript"></script> <scriptsrc="../WFRes/Scripts/Querystring.js"type="text/javascript"></scr...
原生js获取路径带的参数
weixin_44166439的博客
08-02 605
原生js获取路径带的参数 第一种方法 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"); var r = window.location.search.substr(1).match(reg); if (r!=null) return unescape(r[2]); return null; } 第二种方法
python常用的解析器_Python常用的几个解析库的学习整理。BeautifulSoup。
weixin_39616071的博客
12-04 994
这将会是一系列的文章，整理自己之前学习爬虫的各个模块，只是粗略的过一下，介绍部分简单实例。从接触python爬虫到现在，基本上用过了所有常用的解析库。lxml,BeautifulSoup,pyquery。当然了，还有re。个人认为前端基础比较扎实的，用pyquery是最方便的，当然了，beautifulsoup也不错，re速度比较快，但是写正则比较麻烦。lxml的速度也是相对较快的，建议使用。当然...
js获取queryString(get方法)参数
SCUhzs
09-24 573
思路 就是使用split+reduce组合，关于reduce方法，如果不熟，可以阅读我写的笔记。 《一文带你彻底搞懂js的Array.prototype.reduce()方法！》 实现 function getQueryArray(url) { let query = url.split("?").pop().split("&"); let result = query.reduce( (total, cur) => { let tmpO
使用javascript实现一个方法对url的查询参数(querystring)
09-04
使用JavaScript实现一个方法来获取URL的查询参数。 方法一： ```javascript function getQueryParams(url) { const startIndex = url.indexOf('?'); if (startIndex === -1) { return {}; } const queryString = url.slice(startIndex + 1); const queryArr = queryString.split('&'); const queryParams = {}; queryArr.forEach(query => { const [key, value] = query.split('='); queryParams[key] = decodeURIComponent(value); }); return queryParams; } // 示例： const url = 'https://www.example.com/path?param1=value1&param2=value2'; const params = getQueryParams(url); console.log(params); // 输出：{ param1: "value1", param2: "value2" } ``` 方法二（使用URLSearchParams）： ```javascript function getQueryParams(url) { const searchParams = new URLSearchParams(url); const queryParams = {}; for (const [key, value] of searchParams) { queryParams[key] = value; } return queryParams; } // 示例： const url = 'https://www.example.com/path?param1=value1&param2=value2'; const params = getQueryParams(url); console.log(params); // 输出：{ param1: "value1", param2: "value2" } ``` 这两种方法都可以根据给定的URL字符串返回一个包含查询参数的对象，其中查询参数的键和值均为字符串类型，并且能够正确解码URL编码字符。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值