avaweb

在我们平常的javaweb开发中，前台页面经常会用到获取url中的参数，大多数程序员可能直接

用window.location.href 获取到当前页面的url，然后再用substring去截取字符串，这样的话很麻烦。

当然我上面所说的是在html的文件中，如果你是用的jsp的话，那就很简单了。用el表达式我们可以很轻松的获取url中的参数：${param.paramName}

好了，言归正传，那如何在html中获取url中的参数了？

我们可以单独封装一个函数来达到这个目的。以后只要是要获取url的参数，直接调用这个函数就可以了。

function get_param(name, url){

if(!url) url = window.location.href;

name = name.replace(/[\[\]]/g,"\$&");

var regex =newRegExp("[?&]"+ name +"(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if(!results) return null;

if(!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g," "));

}

我在后续的文章中，会分享更多更实用的开发小技巧给大家，希望大家多多关注！

天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split(“?”)这样一步步的分解出需要的参数。

喜欢的朋友可以测试下，希望对大家有所帮助！

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;

}

// 这样调用：

// http://orzhtml.github.io?a=1&b=2&c=3

console.log(getQueryString("a"));

console.log(getQueryString("b"));

console.log(getQueryString("c"));

结果截图：

下面举一个例子:

若地址栏URL为：abc.html?id=123&url=http://orzhtml.github.io

那么，但你用上面的方法去调用：alert(getQueryString("url"));

则会弹出一个对话框：内容就是 http://orzhtml.github.io

如果用：alert(getQueryString("id"));那么弹出的内容就是 123 啦；

当然如果你没有传参数的话，比如你的地址是 abc.html 后面没有参数，那强行输出调用结果有的时候会报错：

所以我们要加一个判断 ，判断我们请求的参数是否为空，首先把值赋给一个变量：

var myurl= getQueryString("url");

if(myurl != null && myurl.toString().length>1) {

alert(myurl);

}

js方法二：获取所有参数这样就不会报错了，结果返回始终会是一个对象！

function GetRequest(){

var url = location.search;//获取url中"?"符后的字串

var theRequest ={};

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;

}

// 这样调用

// http://orzhtml.github.io?a=4&b=5&c=6

var Request = {};

Request = GetRequest();

console.log(Request);

console.log(Request['a']);

console.log(Request['b']);

console.log(Request['c']);

结果截图：

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

加关注，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！