Layer弹出层动态获取数据的方法


Posted in Javascript onAugust 20, 2018

前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能帮助到大家。

之前的代码:

<a id="func11" onclick="func11();">点击查看</a>
function func11() {
  console.log($.cookie("id"));
  //iframe窗
  layer.open({
   type: 2,
   title: false,
   shade: [0.5],
   title: '商品简介',
   shadeClose: true,
   shade: 0.5,
   skin:'demo-class',
   maxmin: true, //开启最大化最小化按钮
   area: ['1000px', '660px'],
   shift: 2,
   content: 'product.jsp?id=<%=rs.getInt(“id”)%>', //iframe的url,
  });
}

错误:id号传不过去,页面跳转之后接收的id不正确,所以显示的页面不正确。

错误原因:变量的作用域有问题。在上面的rs不能传到func11()方法里面,所以传递的参数有问题。

解决方法:在func11()函数中添加一个参数,将id这个参数在点击事件里添加进去。

修改后的代码:

<a id="func11" onclick="func11(<%=rs.getInt(“id”)%>);">点击查看</a>
function func11(x) {
  $.cookie("id",x);
  console.log($.cookie("id"))
  //iframe窗
  layer.open({
   type: 2,
   title: false,
   shade: [0.5],
   title: '商品简介',
   shadeClose: true,
   shade: 0.5,
   skin:'demo-class',
   maxmin: true, //开启最大化最小化按钮
   area: ['1000px', '660px'],
   shift: 2,
   content: 'product.jsp?id=' + $.cookie("id"), //iframe的url
  });
 }

以上这篇Layer弹出层动态获取数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
js 表单验证方法(实用)
Apr 28 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
js new Date()实例测试
Oct 31 Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 #Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
Vue常用指令详解分析
Aug 19 #Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
You might like
收音机术语解释
2021/03/01 无线电
php array_merge下进行数组合并的代码
2008/07/22 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
php 使用array函数实现分页
2015/02/13 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JS交换变量的方法
2015/01/21 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python中字符串的操作方法大全
2018/06/03 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
后备干部考察材料
2014/02/12 职场文书
团支部推优材料
2014/05/21 职场文书
战略合作意向书
2014/07/29 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
五好家庭申报材料
2014/12/20 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技