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

最新推荐文章于 2023-08-31 18:44:00 发布

转载最新推荐文章于 2023-08-31 18:44:00 发布 · 632 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/llicat/p/4815983.html

本文介绍了如何在网页提交过程中防止重复提交，并设置了加载提示（Loading）。主要通过禁用提交按钮或使用全局变量来实现防重复提交，同时利用CSS和JavaScript实现加载提示的显示与隐藏。

【实现原理】

防止重复提交与页面的提交时的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/

转载于:https://www.cnblogs.com/llicat/p/4815983.html