首页 > Js开发 > Js实现短信发送进度条

Js实现短信发送进度条

文章中进度条用到了easyUI的$.messager.progress控件,这里主要讲述进度条实时显示进度的实现。

要实现功能如下:

点击发送短信按钮,然后在进度条中实时显示发送进度。另外还实现了重发发送失败的短信

实现原理如下:

首先向服务器发起一个请求,这个请求主要是用来进行短信的发送,在服务器端记录下已发送的短信条数,然后客户端每隔一段时间去请求这个记录已经发送短信条数的变量,这样就可以把这个变量实时的反馈到进度条上了。

实现代码:

用于处理进度条的函数:

 

[javascript]  
  1. function setSendSMSProgress(phoneLength,progressBar){
  2.     return function(){
  3.         $.ajax({
  4.             url:_rootPath + 'api/sms/GetSentSMSCount',
  5.             type:'GET',
  6.             beforeSend:function(){
  7.             },
  8.             success:function(data){
  9.                 if(parseInt(data) <= phoneLength){
  10.                     var value = parseInt(parseInt(data) / phoneLength * 100);
  11.                     progressBar.progressbar('setValue',value);
  12.                 }else{
  13.                     //alert("发送完毕");
  14.                 }
  15.             },
  16.             error:function(){
  17.                 console.log('error');
  18.             }
  19.         })
  20.     }
  21. }

发送短信函数:

 

 

[javascript]  
  1. function sendSMS(phones,content){
  2.     var me = arguments.callee;
  3.     if (phones.length == 0 || content.trim() == "") {
  4.         $.messager.alert('提醒','请选择党员并输入内容!');
  5.         //alert('请选择党员并输入内容!');
  6.     } else {
  7.         var intervalId = null;
  8.         var progressBar = null;
  9.         var options = {
  10.             type: 'post',
  11.             contentType: 'application/json',
  12.             dataType: 'json',
  13.             url: _rootPath + 'api/sms/PutSendSMS',
  14.             data: JSON.stringify({
  15.                 content: content,
  16.                 phones: phones
  17.             }),
  18.             beforeSend:function(){
  19.                 var phoneLength = phones.length;
  20.                 $.messager.progress({
  21.                     title:'请稍后',
  22.                     msg:'正在发送短信......',
  23.                     interval:0
  24.                 });
  25.                 progressBar = $.messager.progress('bar');
  26.                 intervalId = setInterval(setSendSMSProgress(phoneLength,progressBar),500);
  27.             },
  28.             complete:function(){
  29.                 clearInterval(intervalId);
  30.                 if(progressBar != null){
  31.                     progressBar.progressbar("setValue",100);
  32.                 }
  33.                 setTimeout(function(){
  34.                     $.messager.progress('close');
  35.                 },800)
  36.             },
  37.             success: function(data) {
  38.                 var failArr = [];
  39.                 var successArr = [];
  40.                 for(var i = 0 ; i < data.length; i++){
  41.                     if(data[i] != '1100'){
  42.                         failArr.push(data[i]);
  43.                     }else{
  44.                         successArr.push(data[i]);
  45.                     }
  46.                 }
  47.                 if(failArr.length === 0){
  48.                     setTimeout(function(){
  49.                         $.messager.alert('消息','短信发送成功');
  50.                     },500);
  51.                     $('#member_msg_dlg').dialog('close');
  52.                 }else{
  53.                     setTimeout(function(){
  54.                         $.messager.confirm('消息', '成功'+ successArr.length + '条,失败' +failArr.length+'条,重新发送失败短信?', function(ok){
  55.                             if (ok){
  56.                                 me(failArr,content);
  57.                             }else{
  58.                                 $('#member_msg_dlg').dialog('close');
  59.                             }
  60.                         });
  61.                     },500)
  62.                 }
  63.             },
  64.             error: function(data) {
  65.                 alert('发送失败');
  66.             },
  67.         };
  68.         $.ajax(options);
  69.     }
  70. }

本文固定链接: http://www.devba.com/index.php/archives/4378.html | 开发吧

报歉!评论已关闭.