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模拟select下拉菜单控件的代码
May 08 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
github配置使用指南
2014/11/18 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
tensorflow获取变量维度信息
2018/03/10 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
计算机操作自荐信
2013/12/07 职场文书
领导班子四风表现材料
2014/08/23 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
婚礼新人答谢词
2015/01/04 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python