在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 ----JAVA

在项目中可能会有一些数据量较大的信息作提交，添加，修改等操作等待时间较长，
这样就会有需求就是提示一下，给用户更好的体验感

使用到的技术：thymeleaf
也可不使用thymeleaf，在文章中代码把相关的信息删除就可以

"http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

这个地方先看html中的代码片段
有一个submit按钮做提交操作

下边是引入一个loading图片，显示在遮罩层中，图片可以从网上下载，可以是gif、pig的
还有一句提示的信息

<input id="hiddent" style="height: 30px" th:onclick="'postData()'" type="submit" value="提交"><br>
<span id="loading" class="loadingcss">
	<img src='../static/images/loading2.gif' th:src='@{/images/loading2.gif}' style='text-align:center;margin:0 auto;margin-top:25%;'>
	<p style='color:#ffffff;font-size:14px;'>不要进行别的操作,请稍后……</p>
</span>

其次就要设置遮罩层的样式，也就是上面代码片段中的span标签中的class标签

最后就是显示效果，点击提交出现遮罩层
首先需要在文档就绪函数中加上隐藏字段（使用的ID选择器就是上边代码片段中的span标签中的ID）

其次
可以解决点击提交按钮出现遮罩层
可以解决提交按钮多次重复提交问题，在这里使用到的是ajax提交
在ajax中添加

beforeSend:function(XMLHttpRequest){
		var winNode = $("#loading");
		//使遮罩层显示方法
		winNode.show();
		//解决按钮重复提交
		$("#hiddent").removeAttr("onclick");
},

提交完成之后可以选择跳转到新的页面，然后就不需要管遮罩层的显示问题
最后看一下实现的效果图：

总结：以上就是我的解决方案，记录一下，如果有不对的地方，请指正。