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 相关文章推荐
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
RC4文件加密的python实现方法
2015/06/30 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
PyTorch中permute的用法详解
2019/12/30 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
幼儿教师个人求职信范文
2013/09/21 职场文书
经理职责范文
2013/11/08 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
投标服务承诺书
2014/05/28 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
环卫工作汇报材料
2014/10/28 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers