文章中进度条用到了easyUI的$.messager.progress控件,这里主要讲述进度条实时显示进度的实现。
要实现功能如下:
点击发送短信按钮,然后在进度条中实时显示发送进度。另外还实现了重发发送失败的短信
实现原理如下:
首先向服务器发起一个请求,这个请求主要是用来进行短信的发送,在服务器端记录下已发送的短信条数,然后客户端每隔一段时间去请求这个记录已经发送短信条数的变量,这样就可以把这个变量实时的反馈到进度条上了。
实现代码:
用于处理进度条的函数:
function setSendSMSProgress(phoneLength,progressBar){ return function(){ $.ajax({ url:_rootPath + ‘api/sms/GetSentSMSCount‘, type:‘GET‘, beforeSend:function(){ }, success:function(data){ if(parseInt(data) <= phoneLength){ var value = parseInt(parseInt(data) / phoneLength * 100); progressBar.progressbar(‘setValue‘,value); }else{ //alert("发送完毕"); } }, error:function(){ console.log(‘error‘); } }) } }
发送短信函数:
function sendSMS(phones,content){ var me = arguments.callee; if (phones.length == 0 || content.trim() == "") { $.messager.alert(‘提醒‘,‘请选择党员并输入内容!‘); //alert(‘请选择党员并输入内容!‘); } else { var intervalId = null; var progressBar = null; var options = { type: ‘post‘, contentType: ‘application/json‘, dataType: ‘json‘, url: _rootPath + ‘api/sms/PutSendSMS‘, data: JSON.stringify({ content: content, phones: phones }), beforeSend:function(){ var phoneLength = phones.length; $.messager.progress({ title:‘请稍后‘, msg:‘正在发送短信......‘, interval:0 }); progressBar = $.messager.progress(‘bar‘); intervalId = setInterval(setSendSMSProgress(phoneLength,progressBar),500); }, complete:function(){ clearInterval(intervalId); if(progressBar != null){ progressBar.progressbar("setValue",100); } setTimeout(function(){ $.messager.progress(‘close‘); },800) }, success: function(data) { var failArr = []; var successArr = []; for(var i = 0 ; i < data.length; i++){ if(data[i] != ‘1100‘){ failArr.push(data[i]); }else{ successArr.push(data[i]); } } if(failArr.length === 0){ setTimeout(function(){ $.messager.alert(‘消息‘,‘短信发送成功‘); },500); $(‘#member_msg_dlg‘).dialog(‘close‘); }else{ setTimeout(function(){ $.messager.confirm(‘消息‘, ‘成功‘+ successArr.length + ‘条,失败‘ +failArr.length+‘条,重新发送失败短信?‘, function(ok){ if (ok){ me(failArr,content); }else{ $(‘#member_msg_dlg‘).dialog(‘close‘); } }); },500) } }, error: function(data) { alert(‘发送失败‘); }, }; $.ajax(options); } }