SSM框架JSP使用Layui实现layer弹出层效果_JSP编程

来源:脚本之家  责任编辑:小易  

只要你启动成功了,就可以访问,请你详细描述下是为什么不能访问,如果是Tomcat启动失败,请贴上报错的截图www.zgxue.com防采集请勿采集本网。

最近做的系统里,使用layui当作前端的框架,就是用了layui自带的layer弹出层,效果图如下。

我自己做了一个项目,是一个电商网站,就是用ssm做的,我自己那些文档也写了一些,项目并不完整,只做了用户的相关功能,商家后台管理都没做,如果你想要,回头就给你链接!

首先,导入layui需要的css,js文件,这个就不需要多说了。但是有关键的一步必须要做,也是许多新手会常犯的错误,就是没有预定义layui的form和layer,导致表单和弹出层不显示。

SSM(百Spring+SpringMVC+MyBatis)框架集由Spring、SpringMVC、MyBatis三源框架整合作数据源较简单web项目框架 度其知spring轻量级控制反转(IoC)面向切面(AOP)容器框架道 SpringMVC离控制器

下面是layui的预定义。

首先: SSH框架是Struct+Spring+Hibernate的总称 SSM框架是Spring-MVC+Spring+MyBatis的总称 应用当中的区别主要体现3、使用SSH框架sql语句写在Dao层,而使用SSM框架sql语句是写在配置文件中的。

layui.use(['jquery', 'table', 'layer', 'form'], function() { // 加载layui模块,使用其推荐的【预先加载】方式,详见官网【模块规范】一节 var $ = layui.$; var table = layui.table; var layer = layui.layer; var form = layui.form;

jsp+servlet+javabean的开发模式 需要写很多的重复代码,比如固定使用SSH框架你可以不用深入了解它的深层原理便可以完成相关开发,所以说开发的效率化是其最大的优点。初学者的一点感觉,纯手打,望采纳~

定义完之后可以先写layer弹出层的表单样式,下面是我的layer弹出层表单样式。

1.从JSP页面里传数据到SpringMVC中的Controller处理 a.直接读取表单的数据。在控制器里的方法里,按照这种格式写。RequestMapping(value=\"/login.action\") public void login

<!-- 更新会议弹出层 --><div id="update-layer" style="display: none; padding: 20px"> <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form"> <div class="layui-form-item" style="display: none;"> <label class="layui-form-label">ID</label> <div class="layui-input-block"> <input type="text" name="id" class="layui-input" readonly> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">会议主题</label> <div class="layui-input-block"> <input type="text" name="subject" class="layui-input" lay-verify="required" autocomplete="off"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">备注</label> <div class="layui-input-block"> <textarea name="remarks" placeholder="请输入内容" class="layui-textarea" ></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="update-form-submit">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form></div>

下面是layer弹出层需要的代码。      

//监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'del'){ $.ajax({ url: "/delMeeting", type: "POST", data: {id: data.id,roomShStatus: data.roomShStatus}, success: function (msg) { if (msg) { //删除这一行 obj.del(); //关闭弹框 layer.msg("删除成功", {icon: 6}); } else { layer.msg("删除失败", {icon: 6}); } } }); } else if(obj.event === 'update'){ // 每次显示更新会议室的表单前自动为表单填写该行的数据 form.val('update-form', { "id": data.id, "subject": data.subject, "remarks": data.remarks }); // 显示更新用户表单的弹出层 layer.open({ type: 1, title: '更新会议室', skin: 'layui-layer-molv', area: ['500px'], content: $('#update-layer') }); // 更新会议室表单提交 form.on('submit(update-form-submit)', function(data) { // ajax方式更新会议室 $.ajax({ url: "updateMeeting", type: "POST", data: JSON.stringify(data.field), contentType: 'application/json', dataType: 'json', success: function(data) { if (data.status == 0) { layer.close(layer.index); layer.msg('更新成功'); table.reload('test'); $("#update-user-form")[0].reset(); layui.form.render(); } else if(data.status == 1) { layer.close(layer.index); layer.msg('更新失败'); $("#update-user-form")[0].reset(); layui.form.render(); } }, error: function() { console.log("ajax error"); } }); // 阻止表单跳转 return false; }) } });

直接复制上面的代码,稍作修改,就可以生成自己想要的layer弹出层了

总结

以上所述是小编给大家介绍的SSM框架JSP使用Layui实现layer弹出层效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

纯用JSP写网站的话,连接数据库、处理数据的操作都要在页面中完成,冗余代码会比较多,升级维护比较困难ssh框架提供了很多jar包,也就是帮助开发者使用的一些程序功能,使用ssh框架还会强制开发者使用规范的结构,这样有利于分工合作和项目的升级维护内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 使用layui的layer组件做弹出层的例子
  • 解决layui弹出层layer的area过大被遮挡的问题
  • 在layui中layer弹出层点击事件无效的解决方法
  • 解决layer弹出层自适应页面大小的问题
  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题
  • layer实现关闭弹出层刷新父界面功能详解
  • 详解layer弹出层样式
  • jquery layer弹出层传值到父页面的实现代码
  • 十二、脚本元素、指令和预定义变量
  • spring注入date类型的三种方法总结
  • js实现随机的四则运算题目效果
  • 建立jsp操作以提高数据库访问的效率
  • jsp连接sql server 2000系统配置
  • 微信支付 开发账号体系各参数详解
  • jsp验证码动态生成方法
  • rmi使用学习 小结
  • jsp实现的简单分页显示效果代码
  • spring mvc之dispatcherservlet_动力节点java学院整理
  • jsp与ssh框架的区别
  • ssm框架已搭建好单纯运行jsp页面不行吗
  • java框架组合ssm和ssh各自的优势是什么?
  • servlet 和 jsp与SSH框架做的项目有什么不同
  • Java,现在我用ssm框架写一个新项目
  • ssm框架怎么使用事务和存储过程
  • SSM框架和SSH框架的区别
  • 传统的javaweb开发(jsp+servlet+javabean)与SSH框架各有什么样的优缺点,希望能够做一个对比
  • SSM框架下jsp页面怎么获取数据库的数据
  • 在ssh框架下,如何从一个jsp页面直接跳转到另一个jsp页面,而不经过action。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页jsp编程使用layui的layer组件做弹出层的例子解决layui弹出层layer的area过大被遮挡的问题在layui中layer弹出层点击事件无效的解决方法解决layer弹出层自适应页面大小的问题解决layer弹出层的内容页点击按钮跳转到新的页面问题layer实现关闭弹出层刷新父界面功能详解详解layer弹出层样式jquery layer弹出层传值到父页面的实现代码十二、脚本元素、指令和预定义变量spring注入date类型的三种方法总结js实现随机的四则运算题目效果建立jsp操作以提高数据库访问的效率jsp连接sql server 2000系统配置微信支付 开发账号体系各参数详解jsp验证码动态生成方法rmi使用学习 小结jsp实现的简单分页显示效果代码spring mvc之dispatcherservlet_动力节点java学院整理jsp el表达式详细介绍jsp下页面跳转的几种方法小结jsp生成页面验证码的方法[附代码在jsp页面如何获得url参数spring mvc 框架搭建配置方法及详jsp web.xml文件的作用及基本配置jsp自定义标签taglib实现过程重点servlet+jsp实现图片或文件的上传将html页改成jsp的两种方式jsp 连接mysql配置与使用jsp hibernate 函数简介jsp无法提交nicedit中的内容的解决方法一个用jsp做的日历jsp连接mysql/ms sql server/oracle数据库asp.net getremoteaddr()与 getremotehosiis6 和tomcat5 的整合jsp与servlet的介绍说明jsp使用cookie存储中文示例分享jsp教程(一)详解jsp中使用过滤器进行内容编码的解决办
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved