`

运用aop思想来写前端加载提示信息

    博客分类:
  • js
阅读更多
//<!--蒙板-->
var showLoad = '<div id="bigloadGifShow" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3;position: absolute; left: 0; top: 0; display: back; overflow: hidden;background-color: #000;"></div>';
//<!--弹出层---->
showLoad+='<div id="loadGifShow" style="text-align:center;display:back;position: absolute; left: 46%; top: 46%;"><img src="img/load.gif"/></div>';
//ajax请求开始
$(document).ajaxStart(function (){

$("body").append(showLoad);
showMask("bigloadGifShow");
});
//ajax请求结束
$(document).ajaxStop(function (){

$("#bigloadGifShow").remove();
$("#loadGifShow").remove();
});
//提交form表单
$(function(){

$("form").submit(function (){
$("body").append(showLoad);
showMask("bigloadGifShow");
});
});

//屏蔽输入,显示蒙板
function showMask(id) {
    var obj = document.getElementById(id);
    obj.style.width = document.body.clientWidth;
    obj.style.height = document.body.clientHeight;
    obj.style.display = "block";
}

这里将css样式都写在了style中,而没有单独提出,是因为可以使需要使用的页面少引入一个css文件。
分享到:
评论

相关推荐

    基于SSM的App信息管理系统,前端采用Layui + Ajax.zip

    Layui提供了一整套完善的前端解决方案,包括丰富的内置组件(如表格、按钮、提示、加载、表单等)、美观的页面模版以及强大的API支持,使得开发者能够快速构建出美观且功能强大的网页应用。 1. **Layui Grid**:...

    用ssm框架和Ajax写的分页查询

    9. **状态码和错误处理**:后端返回的状态码(如200表示成功,404表示未找到)和错误信息,可以帮助前端判断请求是否成功,以及在出错时提供相应的提示。 10. **前端分页库**:为了简化前端分页逻辑,可以使用诸如...

    基于SpringBoot+Vue实现的前后端分离博客系统源码+数据库+项目说明(含前端+后端).zip

    ├── handler -- 处理器模块(扩展Security过滤器,自定义Security提示信息等) ├── service -- 服务模块 ├── strategy -- 策略模块(用于扩展第三方登录,搜索模式,上传文件模式等策略) ├── util -- ...

    SG-UAP前端开发最全秘籍

    - **初始化**:加载Weblet所需的资源和配置信息。 - **渲染**:根据配置信息生成DOM元素并显示在界面上。 - **事件绑定**:为Weblet中的元素绑定事件处理函数。 - **数据绑定**:实现数据模型与视图的双向同步。...

    文具申请系统 部分源代码

    "规范化信息提示"意味着在用户进行操作时,系统会提供清晰、一致且有用的提示信息,帮助用户理解状态,避免错误,并提高操作效率。 【标签】中的技术关键词是了解这个系统实现的关键: 1. **Spring**:这是一个...

    基于SSM框架的商城管理系统.pdf

    总的来说,这个基于SSM框架的商城管理系统运用了现代Web开发的各种技术,实现了高效、安全且易于维护的后台管理功能,包括商品管理、订单管理、用户管理等多个模块。通过对Spring、SpringMVC、MyBatis等框架的熟练...

    ssh整合实现登录的例子,包含源代码,用extjs做的登录界面

    在这个例子中,我们将深入探讨如何利用SSH整合来实现一个登录功能,并且这个功能的前端界面是通过ExtJS库创建的。 1. **Spring框架**:Spring是核心的依赖注入(DI)和面向切面编程(AOP)框架,它管理着应用中的...

    基于SSM框架的员工考勤系统

    通常,开发者会采用JavaScript、jQuery或现代的前端框架如Vue.js、React.js来增强用户体验,实现页面的动态加载和交互。此外,CSS3和Bootstrap等库可以用于美化界面,使其符合现代审美标准。系统还具备导出员工考勤...

    健身房私教预约微信小程序+ssm后端源码案例设计.zip

    在前端微信小程序部分,设计应注重用户体验,包括清晰的界面布局、流畅的交互流程以及友好的提示信息。用户可以通过小程序查看教练的资质、评价,选择合适的课程时间并完成在线支付。同时,教练端也需要有相应的功能...

    毕业设计-基于JavaScript与SSMLayui框架的学生宿舍管理系统实现

    Layui是一个轻量级的前端组件库,它提供了丰富的UI组件,如表格、表单、按钮、提示、弹窗等,用于快速构建美观的管理界面。Layui强调扁平化设计,其组件易于使用,且兼容各种浏览器,大大提高了开发效率。 在这个...

    SSM旅游景点信息交流平台(源码+数据库)290915

    在SSM旅游景点信息交流平台上,Vue.js可能被用来实现动态加载城市和景点信息,以及展示用户发布的旅游攻略。游客可以通过筛选条件如城市、时间等快速找到合适的旅游路线。 数据库方面,虽然没有具体提及数据库类型...

    最新设计ssm停车场管理系统--适合计算机毕设、大作业实训项目.rar

    10. **用户界面设计**:良好的用户界面设计能提升用户体验,包括清晰的操作流程、友好的提示信息和响应式布局,以适应不同的设备和屏幕尺寸。 通过参与这个项目,学生不仅可以掌握SSM框架的使用,还能了解到软件...

    基于springboot实现表单重复提交.docx

    6. 如果无匹配,说明前端仍然使用的旧 token,且不是第一次点击(因为 Redis 中没有),前拦截器立即拦截,业务终止,后端给予反馈提示信息【操作处理中,请稍后。。。】。 核心代码 自定义注解: ```java @...

    基于微信小程序小说阅读器设计+ssm后端源码案例设计.zip

    7. **API设计**:后端需要提供接口供前端调用,例如用户登录、获取书籍列表、加载章节内容等。这些API的设计应遵循RESTful原则,以提高可读性和可维护性。 8. **前端交互**:微信小程序的页面跳转、数据渲染、事件...

    实现登录用户管理功能的demo

    在这个项目中,jQuery可能被用来处理用户交互,比如表单验证、按钮点击事件等,同时也可能用于创建动态效果,如加载提示或错误提示的弹出框。 总的来说,这个demo通过集成Spring、Struts2、Spring JDBC Template、...

    SSM学生成绩管理系统.zip

    总的来说,SSM学生成绩管理系统利用了Java的三大框架构建了一个完整的Web应用,前端通过Layui提供友好的用户界面,后端通过SSM处理业务逻辑和数据访问,所有这些都在现代化的开发工具和服务器环境中运行。...

    基于ssm+mysql的继续教育学员学籍管理系统源码数据库.zip

    8. **异常处理**:系统会集成Spring的全局异常处理机制,统一捕获和处理运行时异常,提供友好的错误提示信息,提高用户体验。 9. **单元测试**:为了确保代码的质量,开发者可能会使用JUnit和Mockito等工具对服务层...

    HETF-LigerUI界面权限控制开发.zip

    6. **AOP(面向切面编程)**:在Java等后端语言中,可以利用AOP来实现全局的权限拦截,使得每个需要权限控制的接口都能自动进行权限校验。 7. **数据过滤**:对于列表展示的数据,需要根据用户的权限过滤掉不应显示...

    idea实现SSM+bootstrap(包换部分缓存及菜单权限)

    SSM框架是Java Web开发中常用...总之,这个项目提供了一个全面的SSM框架实践案例,涵盖了后端业务逻辑、数据库交互、前端展示和用户权限管理等多个方面,对于想要提升Java Web开发技能的开发者来说,是一个宝贵的资源。

Global site tag (gtag.js) - Google Analytics