A标签/按钮防止重复提交&页面Loading制作

【实现原理】

防止重复提交与页面的提交时的Loading设置，均是在提交，但是尚未处理完成进行的操作，且提交为异步提交（同步提交不需要考虑）。因此，其实现原理是在点击按钮或A标签时，将按钮/A标签置为不可用，在提交完成的回调函数中再将按钮/A标签置为可用；Loading原理是在点击提交时，生成Loading样式，在提交完成之后隐藏该样式。

[同步]：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
[异步]：请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

【按钮防止重复提交】

function save(){
$('#submit').attr("disabled",true);
//或者$('#submit').attr("disabled","disabled");
$.post(url, params, function (data) {
$('#submit').attr("disabled",false);
//或者$('#submit').removeAttr("disabled");
//或者$('#submit').attr("disabled","");
});
}

OS:原生Js处理：document.getElementById("submit").disabled = true;

【A标签防止重复提交】

需注意的是，A标签是没有disabled属性的，所以用按钮的方法控制A标签的提交是不起作用的。

//全局变量
var save_flag = true;

function save(){
save_flag = false;
$.post(url, params, function (data) {
save_flag = true;
//........其余代码
});
}

这种方法在按钮的防止提交中也可以使用，总的来说是一种通用、简易的方法。

【Loading】

CSS中：

<style>
#loading {
position: fixed;
width:500px;
top:50%;
left:50%;
margin: -25px -250px;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
text-align:center;
padding:25px;
}
</style>

HTML中：

<div id="loading" style="display: none" ><img style="vertical-align: middle;" src="images/loading.gif" />Loading...</div>

JS代码：

function save(){
$("#loading").css("display","");
$.post(url, params, function (data) {
$("#loading").css("display","none");
//........其余代码
});
}

转载请注明出处：
http://www.cnblogs.com/llicat/