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 相关文章推荐
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
理解javascript中DOM事件
Dec 25 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
Element Rate 评分的使用方法
Jul 27 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
博士208HAF收音机实习报告
2021/03/02 无线电
php 类自动载入的方法
2015/06/03 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
用户注册常用javascript代码
2009/08/29 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python如何统计序列中元素
2020/07/31 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
用python读取xlsx文件
2020/12/17 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
订货会邀请函
2015/01/31 职场文书
2015年推普周活动方案
2015/05/06 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL