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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
JavaScript实现alert弹框效果
Nov 19 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基础知识:控制结构
2006/12/13 PHP
PHP小技巧之函数重载
2014/06/02 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
Ext面向对象开发实践(续)
2008/11/18 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Python中字典映射类型的学习教程
2015/08/20 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python类装饰器实现方法详解
2018/12/21 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
大专生简历的自我评价
2013/11/26 职场文书
《乌塔》教学反思
2014/02/17 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL