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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 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
PHP 中的批处理的实现
2007/06/14 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
Highcharts入门之简介
2016/08/02 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
js读取本地文件的实例
2017/12/22 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python读取文件名称生成list的方法
2018/04/27 Python
python pytest进阶之fixture详解
2019/06/27 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python post请求实现代码实例
2020/02/28 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
自主招生自荐信范文
2015/03/04 职场文书
销售督导岗位职责
2015/04/10 职场文书
导游词之太原天龙山
2020/01/02 职场文书