标签：
【实现原理】
防止重复提交与页面的提交时的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/
标签：
原文地址：http://www.cnblogs.com/llicat/p/4815983.html
