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="data: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/

巴特西

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

最新文章

热门文章