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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php导出生成word的方法
2015/12/25 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
物流专业大学生求职信范文
2013/10/28 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
创业大赛策划书
2014/03/01 职场文书
学生个人自我鉴定
2014/03/26 职场文书
施工安全责任书
2014/04/14 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Nginx反向代理、重定向
2022/04/13 Servers
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android