上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全
关键是setInterval无法传递参数,所以用了匿名函数再包裹一下就好了。
//重置发布进度 function resetPercent(id_data){ $.ajax({ url:'/autodeploy/reset_percent/' + id_data, success: function(json){ }, }); }; //间隔刷新,显示百分比,AJAX调用rest_framework框架 var _interval = {}; function showPercent(id_data){ //var _interval; var percent_value; var id_subserver = id_data.split("-")[0] $.getJSON("/api/subserver/" + id_subserver, function(data,state){ if (state == 'success') { percent_value_array = data.deploy_status.split(","); percent_value = percent_value_array[0]; cmd_value = percent_value_array[1]; $('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-active'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>" + cmd_value + ' ' + percent_value + "%</div><i class='uk-icon-cog uk-icon-spin'></i></div>"); console.log(percent_value[0]) if ( percent_value != 100 ){ //_interval = setInterval(showPercent(id_data), 3000); } else { clearInterval(_interval[id_data]); $('#' + id_data).html("<div class='uk-progress uk-progress-striped uk-progress-success'><div class='uk-progress-bar' style='width: " + percent_value + "%;'>100%</div></div>"); }; }; } ); }; $(".btn-multi-deploy").click(function(){ var deploypool_id = $(this).attr("deploypool_id") var group_data = $("#deploy-form" + deploypool_id).serialize() var deploy_type = $(this).attr("deploy_type") var _self = this; console.log(deploypool_id, group_data) //因为涉及到模态对话态中的AJAX输出ID定位,所以用了两个数组来重置更新进度和刷新百分比。可以优化。 var id_array = [] var id_s_array = [] var group_array = group_data.split("&"); for (var key_data in group_array) { if (group_array[key_data].indexOf("select-deployversion") != -1) { deploy_id = group_array[key_data].split("=")[1] }; if (group_array[key_data].indexOf("check-server") != -1) { id_s_array.push(group_array[key_data].split("=")[1]) id_array.push(group_array[key_data].split("=")[1] + "-" +deploy_id) }; }; promiseDEPLOY = $.ajax({ url:'{% url "autodeploy:group-cmd" %}', type: 'post', data:{ group_data: group_data, deploy_type: deploy_type, }, dataType: 'json', beforeSend: function(){ result_output = $(_self).siblings("p.result_output"); result_output_desc = $(_self).siblings("p.result_output_desc"); $(_self).attr('disabled',"true"); $(_self).append(" <i class='uk-icon-cog uk-icon-spin'></i>"); result_output_desc.append(" <strong>集群发布中,请耐心等候....</strong>"); // result_output.html("<div >集群发布中,请耐心等候....</div>"); //发送前重置 for( index=0;index < id_s_array.length;index++){ resetPercent(id_s_array[index]); } }, success: function(json){ $(_self).children('i').remove(); $(_self).append(" <i class='uk-icon-check'></i>") result_output_desc.append("<span class='uk-text-success'><i class='uk-icon-check'></i></span>"); result_output_desc.append("<span class='uk-text-success'>异步队列分发完成,每个服务器开始更新。</span>"); //发送后获取进度 for( index=0;index < id_array.length;index++){ var key = id_array[index]; //_interval = setInterval(function(){showPercent(key)}, 3000); _interval[key] = setInterval(function(){showPercent(key);}, 3000); } }, error: function(){ result_output_desc.append("<span class='uk-text-muted'><br>服务器内部错误 </span>"); result_output_desc.append("<span class='uk-text-danger'><i class='uk-icon-remove'></i></span>"); $(_self).children('i').remove(); result_output.html("<div ></div>"); }, complete: function(){ } });/* end cmd-run stop */ });
上次的AJAX定时刷新多ID不正确,这次请教了高手之后补全的更多相关文章
- jQuery实现AJAX定时刷新局部页面实例
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax ...
- 【jQuery】: 定时刷新页面
<%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...
- 使用ajax+php+mysql实现数据库定时刷新
php版本5.5.9,mysql版本5.7. 所以php链接mysql就是使用mysql_connect. 如果遇到了连接时没有成功也没有失败的情况时,就重启mysql,或重启docker(睡一觉就好 ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Ajax回退刷新页面问题的解决办法
在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
随机推荐
- CMD/AMD
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues ...
- java poi出excel换行问题
POI操作excel实现换行问题. package jp.co.misumi.mdm.batch.common.jobrunner; import java.io.FileInputStream; i ...
- Java多线程编程总结(学习博客)
Java多线程编程总结:网址:http://lavasoft.blog.51cto.com/62575/27069/
- 学习笔记4_ServletContext(重要整个Web应用的动态资源之间共享数据)
ServletContext(重要) 一个项目只有一个ServletContext对象! 我们可以在N多个Servlet中来获取这个唯一的对象,使用它可以给多个Servlet传递数据! 与天地同寿!! ...
- 第十二篇、高度自适应的textView
高度根据输入内容变化输入框,我们在很多的应用上都可以见到,如微信.QQ聊天,QQ空间评论等等,该输入框可以用xib,纯代码编写,但是个人觉得纯代码编写用起来更加方便一些. 1.使用自定义的UIView ...
- 给String添加reverse方法
我们知道Array有个reverse方法,String则没有,但可以Array来实现,字符串有个split方法可以轻易的将String转换为Array. String.prototype.revers ...
- android 登陆案例_最终版本 sharedpreference
xml 与之前的登陆案例相同 java代码: package com.itheima.login; import java.util.Map; import com.itheima.login.ut ...
- sublime 安装 Terminal 使用 cmder
在 packagecontrol.io 可以找到 Terminal. 在 cmder.net 下载 cmder 复制 Terminal.sublime-settings 文件到 C:\Users\WX ...
- 14_Request对象
[HttpServletRequest简介] HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过 ...
- 删除Windows 文本右键选项
删除Windows 文本右键选项 在Windows上用所谓的绿色版安装了EditPlus,但是给的卸载程序(即删除掉注册表相应的选项)无法使用,导致只能手动从Regedit(注册表-编辑器)中手动删除 ...