分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

使用Ajax同步请求时,等待时间过长增加页面提示问题

发布时间:2023-09-06 02:21责任编辑:彭小芳关键词:Ajax

最近在做项目时,有一个需求是批量打印好多个合同,使用AJAX向后台传送数据,等待后台执行后,需要把生成之后的文件地址传送过来。

后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,,以及项目的完善性,

这个时候就需要增加一个等待页面进行提示。

我们先来看一个Ajax同步请求与异步请求的区别:

异步和同步:

ajax中   async属性是设置同步和异步,async:false,时表示此时ajax为同步请求,如果不写或者设置成true表示异步请求

$.ajax({ ???????????????????type : "get", ???????????????????async:true, ???????????????????url : ??????????????????????????????????????????success : function(targetPath){ ??????????????????????????????????????}, 


当设置成同步时,意味着执行完当前的程序段,才能执行下一段,它属于阻塞模式,其表现在网页上面就是会出现页面假死现象,也就是暂停当前的页面,用户不能操作其它的,必须等待当前请求返回数据,在这个过程中用户看不到任何的提示以及等待提醒。

而使用异步方式请求,页面后再次段程序等待的时候,继续的向下执行,等待执行结束再返回结果,页面不会出现假死现象。

我现在遇到的问题是:点击一个按钮,使用Ajax向后台传送数据,等待后台的执行,由于后台执行时间过长,这个时候页面出现所谓的假死现象,容易引发误操作。

我的思路是:在ajax返回结果之前,增加一个遮罩层的函数显示效果,在执行之后,显示隐藏效果,于是我写了一个遮罩层的函数,准备放到ajax中。

我通过查阅各种帖子发现有类似的描述,说是可以使用ajax的一个属性进行设置

beforeSend: function(){)

,类似:

$.ajax(function(){//省略了一些参数,这里只给出async 和 beforeSendasync: false, //同步请求,默认情况下是异步(true)beforeSend: function(){$(‘#warning‘).text(‘正在处理,请稍等!‘);}});

但是设置成这样效果是出不来的,因为beforeSend只有在ajax设置成异步请求时,才会显示出beforeSend中函数的效果。

在这里根据业务需要,ajax是不能改为异步的,因为必须等待文件地址返回后才能继续后面的操作。

除此之外,loading也使用过,还有各种加提示的方法,但是sys为异步时,效果都会无法显示。

在这个时候就需要引入一个JQuery中一个对象deferred,来对ajax进行封装异步函数。

主要使用的是deferred中   $.when的方法使用,主要是对多个deferred对象进行并行化操作,当所有deferred对象都得到解决就执行后面添加的相应回调

具体使用如下:

使用之前需要先进行声明

var defer = $.Deferred();
 ???function toGetData() { ???????var defer = $.Deferred(); ???????var checkedIds=$("input[name=‘backEntrust‘]:checked"); ???????????if(checkedIds.length==0){ ???????????????alert("请选中要打印的合同"); ???????????????return false; ???????????} ???????????????????????var r=confirm("确定打印吗?"); ???????????if (r==true){ ???????????????????????var enIds=new Array(checkedIds.length); ???????????????for(var i=0; i<checkedIds.length; i++){ ???????????????????enIds[i] = checkedIds[i].value; ???????????????????} ???????????????????????????????????$.ajax({ ???????????????????type : "get", ???????????????????async:true, ???????????????????url :"${pageContext.request.contextPath}/renWuFenPeiService_mergerSample.action?entrustIds="+enIds, ??????????????????????????????????????????success : function(targetPath){ ???????????????????????defer.resolve(targetPath) ??????????????????????????????????????????}, ????????????????????error : function() { ???????????????????????alert("样品检测委托单合并失败,请重试。"); ???????????????????????} ???????????????????????????????????????????}); ?????????????????????????????????????????????????????????????????????????????????????}else ????????????{ ???????????????window.location.reload(); ????????????} ?????????????????????????????????????return defer.promise(); ???????????} ???????$(‘#batchPrint‘).on(‘click‘, function() { ???????loading(); ???显示遮罩层函数 ???????$.when(toGetData()).done(function(targetPath){ ????????????????????$(".shodow").hide() ???????????????$("#batchPrinttwo").attr("href","/file/"+targetPath); ?????????document.getElementById("batchPrinttwo").click(); ?????????loaded(); ??取消遮罩层函数 ???????}); ???????});

在这段代码中,我们可以看到ajax设置的是异步请求,但是我们需要的是同步请求啊,在这使用了JQuery中的deferred之后,我们想要的显示效果就出来了,我们就可以使用ajax的异同请求,达到同步的效果。

使用Ajax同步请求时,等待时间过长增加页面提示问题

原文地址:https://www.cnblogs.com/leo1014/p/9929147.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved