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

博客围绕点击按钮触发后台请求方法的需求展开。提到使用ajax请求,其有同步和异步两种方式。同步属阻塞模式,会使页面假死;异步页面不会假死。虽两种方式都能满足需求,但同步不太友好,不过实测同步方式管用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

ajax

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

异步

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

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

同步

 <a data-type="send" class="btn btn-default ml10" id="rz" disable="true">入账操作</a>
 // 发送数据到接口
    $('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});
    }

实测管用

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值