每日干货
今天小编碰到一个朋友问这么一个问题，怎么在一个页面中获取另外一个页面url传过来的参数呢？最初一开始很本能的想到了用 split(“?”)，这样一步步的分解出需要的参数。但是想了一下，这样写起来比较绕，也不易懂，肯定会有更加简单的方法的！最后在网上找到了几个简单实用的方法，通过小编的测试验证是没有问题的，现在将具体的方法总结如下:
01split拆分法
通过对返回的URL字符串采用split方法截取的方式获取参数值。
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=阿豪”;function urlTest01() { // 第一种：无参数（不传url，直接从当前浏览器的url获取） let params01 = GetRequest(); console.log(params01); // {uid: “admin”, passWord: “123456”, fid: “1314”, name: “阿豪”} console.log(params01[‘name’]); // 阿豪 // 第二种：传url let 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;}
测试调用方法：
function urlTest02() { let name = GetQueryValue(‘name’); console.log(name); // 阿豪}
02正则法
通过对返回的URL字符串，采用正则表达式的方式获取到参数值。
1）、正则法用法一：
/** * [通过参数名获取url中的参数值] * 示例URL:”http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪”; * @param {[string]} queryName [参数名] * @return {[string]} [参数值] */function GetQueryValue(queryName) { debugger var 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; }}
测试调用方法：
function urlTest03() { 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;}
测试调用方法：
function urlTest04() { let value = GetQueryString(‘name’); console.log(value); // 阿豪}
03单个参数获取法
当返回的URL中只有一个参数时，直接采用单个参数获取的方法获取参数值。
/** * 获取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;}
测试调用方法：
