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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
一些mootools的学习资源
Feb 07 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
Array对象方法参考
2006/10/03 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
js实现消息滚动效果
2017/01/18 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
python中单下划线_的常见用法总结
2018/07/10 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
数控技术应届生求职信
2013/11/13 职场文书
生物学学生自我评价
2014/01/17 职场文书
优秀小学生家长评语
2014/01/30 职场文书
专项法律服务方案
2014/06/11 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
前台岗位职责范本
2015/04/16 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python