今天小编碰到一个朋友问这么一个问题，怎么在一个页面中获取另外一个页面url传过来的参数呢？最初一开始很本能的想到了用 split("?")，这样一步步的分解出需要的参数。但是想了一下，这样写起来比较绕，也不易懂，肯定会有更加简单的方法的！最后在网上找到了几个简单实用的方法，通过小编的测试验证是没有问题的，现在将具体的方法总结如下:
1、split拆分法；
通过对返回的URL字符串截取的方式获取参数值。
1）、函数一：获取URL中的参数名及参数值的集合
/*** [获取URL中的参数名及参数值的集合]* 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";* @param {[string]} urlStr [当该参数不为空的时候，则解析该url中的参数集合]* @return {[string]} [参数集合]*/function GetRequest(urlStr) {if (typeof urlStr == "undefined") {// 获取url中"?"符后的字符串var url = decodeURI(location.search);} else {var url = "?" + urlStr.split("?")[1];}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]] = decodeURI(strs[i].split("=")[1]);}}return theRequest;}
测试调用方法：
let url = "http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";// 第一种：无参数（不传url，直接从当前浏览器的url获取）let params01 = GetRequest();console.log(params01);// {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}console.log(params01['name']); // 阿豪// 第二种：传urllet params02 = GetRequest(url);console.log(params02);// {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}console.log(params02['name']); // 阿豪
2）、函数二：通过参数名获取url中的参数值
/*** [通过参数名获取url中的参数值]* 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";* @param {[string]} queryName [参数名]* @return {[string]} [参数值]*/function GetQueryValue(queryName) {debugger;var query = decodeURI('window.location.search'.substring(1));var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == queryName) {return pair[1];}}return null;}
测试调用方法：
let name = GetQueryValue('name');console.log(name); // 阿豪
2、正则法；
通过对返回的URL字符串，采用正则获取到参数值。
1）、正则法用法一：
/*** [通过参数名获取url中的参数值]* 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";* @param {[string]} queryName [参数名]* @return {[string]} [参数值]*/function GetQueryValue(queryName) {debuggervar reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");// 获取url中"?"符后的字符串并正则匹配var r = window.location.search.substr(1).match(reg);if (r != null) {return decodeURI(r[2]);} else {return null;}}
测试调用方法：
let queryVal = GetQueryValue('name');console.log(queryVal); // 阿豪
2）、正则法用法二：
/*** [通过参数名获取url中的参数值]* 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";* @param {[string]} queryName [参数名]* @return {[string]} [参数值]*/function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);var context = "";if (r != null)context = r[2];reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}
测试调用方法：
let queryVal = GetQueryValue('name');console.log(queryVal); // 阿豪
3、单个参数的获取方法
/*** 获取url中只有一个参数的参数值]* 示例URL: "http://test/getIndex/indexRequest.html?name=阿豪";* @return {[string]}[参数值]*/function GetRequestValue() {// 获取url中"?"符后的字串var url = location.search;// 判断是否有参数if (url.indexOf("?") != -1) {// 从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串var str = url.substr(1);strs = str.split("=");return strs[1];}return null;}
测试调用方法：
let queryVal = GetRequestValue();console.log(queryVal); // 阿豪
获取更多内容，请关注我的个人微信公众号【程序员Style】，每天会分享新的技术、知识，工作中的常见问题，更多资料视频等，关注回复“666”即可获取学习资料。
