ajax 提交的数据的时候如何不让操作

迷南。 2022-12-31 11:19 67阅读 0赞

### ajax 提交的数据的时候如何不让操作 ###

*  需求：在点击某一按钮的时候触发后台请求方法。
 *   *  ajax
     *  异步
     *  同步

# 需求：在点击某一按钮的时候触发后台请求方法。 #

在点击某一按钮的时候触发后台请求方法，但是可能后台数据量大，前台不知道有没有发送完成，不能让用户再次点击此方法，直到前一次数据返回完成开始。

## ajax ##

首先想到的肯定是ajax的请求方式，点击按钮传输数据到后台，进行后台处理，ajax有同步跟异步两个方法。  
异步和同步：  
同步意味着执行完一段程序才能执行下一段，它属于阻塞模式，其表现在网页上的现象是——浏览器会锁定页面（即所谓的页面假死状态），用户不能操作其它的，必须等待当前请求返回数据。而使用异步方式请求，页面不会出现假死现象，可以继续操作其它。  
根据我们的需求，这两种方式都满足，但是同步意味着其它操作也操作不了不太友好。

## 异步 ##

$.ajax(function(){ 
    async: false, //同步请求，默认情况下是异步（true）
    beforeSend: function(){ 
    	$('#send').text('正在处理，请稍等！');
    	//也可以在这加上正在处加载的gif图片
    }
    });

但是这样做意味着所有的操作都操作不了了，而我们只要求当前这个方法不再继续执行就好了。

## 同步 ##

// 发送数据到接口
        $('a[data-type="send"]', queryForm).on('click', function (event) { 
        	 roleGroupSend(documentdate);
        });
    
    
    var roleGroupSend = function (documentdate) { 
            Common.ajax({ 
                url : XXXX,
                data : { 
                    _method : 'POST',
                    documentdate : 参数
                },
                contentType : 'form',
                beforeSend:function()
                {   
                	//点击了以后就置灰不让点击
                     $("#rz").attr("disabled",true).css("pointer-events","none");
                     $('#rz').css({  opacity: 0.2});
                },
                success : function (result) { 
                	
                    show();
                },
                errorHandler : function (title, message,msg) { 
                	show();
                },
                error : function (title, msg, msgDet) { 
                    show();
                }
            });
        };
        
    //放开置灰
     var show = function () { 
        	$("#rz").attr("disabled",false).css("pointer-events","auto");
        	$('#rz').css({  opacity: 1});
        }

实测管用

我是张同学，记录下工作中出现的问题。  
**不积跬步，无以至千里；不积小流，无以成江海。**