layui 跳转页面时的传参和取值问题

---

前言

layui 如何在当前页面点击按钮弹框，弹出的框内容为新页面，将值传到该页面中，并进行取值，是本篇文章主要记录的问题。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、跳转页面

点击弹框按钮，弹出新页面，用一下方法，layer.open即弹出一个窗口
示例如下：

1.弹框按钮

<button class="layui-btn layui-btn-normal" id="eject"
	type="button" lay-submit="" lay-filter="eject">弹框</button>

2.调用弹框方法

form.on('submit(eject)',function(){
//我这里定义了一个参数id
   		var id="123456";
		//跳转一个新的页面
			layer.open({
				type: 2,
				area: ['85%', '80%'],
				shadeClose: true,
				shade: 0.8,
				maxmin: true,
				//这里进行页面的跳转，并在跳转时进行传参，传参方式用?拼接的方式
				content: '${pageContext.request.contextPath}/jsp/demo/test.jsp?id='+id,
				success: function(layero, index){

				}
			});
		});
	});

二、取值

1.取值的方法

代码如下：

/**
 * 获取query参数后面的属性
 * @param {String} name 需要获取的参数
 */

var gtGetQueryString = function(name){
   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
   var url = window.location.href
   var search = url.substring(url.lastIndexOf('?') + 1)
   var r = search.match(reg)
   if (r != null) return decodeURI(r[2])
   return null
   window.gtGetQueryString = gtGetQueryString;
};

取值时调用该方法即可。

2.取值方法的第二种写法（与上述代码只是语法不同，效果一样都可用）

可将其提成公共方法，将以下代码添加到js文件中，例如gt.js。这样需要取值时，只需要引入该js文件即可。

/**
 * 获取query参数后面的属性
 * @param {String} name 需要获取的参数
 */
(function() {
    const gtGetQueryString = (name) => {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
        const url = window.location.href
        const search = url.substring(url.lastIndexOf('?') + 1)
        const r = search.match(reg)
        if (r != null) return decodeURI(r[2])
        return null
    }
    window.gtGetQueryString = gtGetQueryString;
}());

3.调用方法

代码如下：

//调用方法进行取值
var id=gtGetQueryString("id");
//打印值
console.log(id);

输出结果：

---

总结

以上就是今天要讲的内容，其中调用取值方法时，方法中传入的名称要和参数名一致，这样才能取到对应的值。