频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Js实现短信发送进度条
2014-01-15 14:24:05         来源:王浩烽的专栏  
收藏   我要投稿

文章中进度条用到了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);
	}
}


点击复制链接 与好友分享!回本站首页
相关TAG标签 短信发送 进度
上一篇:移动端JS 触摸事件基础
下一篇:Jquery 实现智能全选插件
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站