JavaScript与jQuery获取URL参数的多种实现方式

jQuery插件解析URL参数

使用jQuery获取URL参数

jQuery库本身并未内置直接获取URL参数的方法，但社区提供了相关插件以简化操作。

推荐的插件主页地址为：https://github.com/allmarkedup/jQuery-URL-Parser

插件下载链接为：http://download.github.com/allmarkedup-jQuery-URL-Parser-bb2bf37.zip

使用示例

以下示例基于当前页面URL（例如：https://mysite.com/information/about/index.html?itemID=2&user=dave）进行演示：

// 获取协议部分

jQuery.url.attr("protocol") // 返回 'http'

// 获取路径部分

jQuery.url.attr("path") // 返回 '/information/about/index.html'

// 获取主机名

jQuery.url.attr("host") // 返回 'mysite.com'

// 获取名为itemID的查询参数值

jQuery.url.param("itemID") // 返回 2

// 获取URL路径中的第二个段

jQuery.url.segment(2) // 返回 'about'

若需解析非当前页面的其他URL：

// 设置目标URL并返回锚点字符串

jQuery.url.setUrl("http://allmarkedup.com/category/javascript/#footer").attr("anchor") // 返回 'footer'

原生JavaScript解析方法

使用原生JavaScript获取

最基础的JS实现方式如下：

 
var URLParams = new Array();
var aParams = document.location.search.substr(1).split('&');
for (i=0; i < aParams.length ; i++){
var aParam = aParams[i].split('=');
URLParams[aParam[0]] = aParam[1];
} 

调用示例如下：

http://127.0.0.1/index.php?name=name1&cid=123

// 获取传入的name参数

name=URLParams["name"];

document.write(name);

// 获取传入的cid参数

cid=URLParams["cid"];

正则表达式解析方案

正则表达式分析法

方法一：

 
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;
} 

调用示例如下：

 
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

方法二：

 
<span style="font-size: 16px;"><Script language="javascript">
function GetRequest() {
var url = location.search; // 获取问号后的字符串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
} 
} 
return theRequest;
} 
</Script>

调用示例如下：

 
<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数3 = Request['参数3'];
参数N = Request['参数N'];
</Script>