前言
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);
输出结果: