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代码)
Oct 29 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
js中跨域方法原理详解
Jul 19 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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魔术方法的使用示例
2015/06/23 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 调用有道api接口的方法
2019/01/03 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python类如何定义私有变量
2020/02/03 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
人口与计划生育责任书
2015/05/09 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
PHP 时间处理类Carbon
2022/05/20 PHP
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS