jQuery progressbar通过埃阿斯请求实现后台进度实时功能

本文主要演示Jquery progressbar的进度条功能js。通过创建交互式、快速动态网页应用的网页开发技术请求向后台实时获取当前的进度值。后台将进度值存储在甜饼干中，每次请求后，将进度条的值增2个。以此演示进度条的实时显示功能。

前台index.jsp

jsp代码如下

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!- !DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN '-！DOCTYPE html html head base href=' %=基路径% ' title my JSP ' index。“JSP”起始页/title link rel='样式表type=' text/CSS ' href=' js/themes/default/measuri。CSS ' link rel='样式表type=' text/CSS ' href=' js/themes/icon。CSS ' link rel='样式表type=' text/CSS ' href=' js/demo/demo。CSS ' script type=' text/jav $(function(){//每隔0.5秒自动调用方法，实现进度条的实时更新timerId=窗口。setinterval(getForm，500)；});函数getForm(){ //使用JQuery从后台获取JSON格式的数据$.ajax({ type:'post '，//请求方式URL : ' getProgressValueByJson '，//发送请求地址timeout:30000，//超时时间：30秒dataType:'json '，//设置返回数据的格式//请求成功后的回调函数数据为json格式success :函数(数据){ if(数据。进度值=100){ window。clear interval(TiMerid)；} $('#p ').progressbar('setValue '，数据。进度值)；}, //请求出错的处理错误：函数(){ window。clear interval(TiMerid)；警报('请求出错');} });}/脚本/头体div style=' margin 3360100 px0 '/div div id=' p ' class=' measuri-进度条' style=' width : 400 px/div /body/htmlstruts.xml文件的配置

？可扩展标记语言版本='1.0 '编码='UTF-8 '？DOCTYPE Struts PUBLIC '-//Apache软件基金会//DTD Struts配置2.0//EN ' ' http://Struts。阿帕奇。org/dtds/Struts-2.0。DTD ' Struts常量名='struts.devMode '值='true' /包名=' front '扩展=' Struts-默认值'命名空间='/'操作名='getProgressValueByJson '类=' edu。新泽西起来。zhb。测试。“测试操作”方法='getProgressValueByJson '结果名='后台的爪哇岛代码()

包edu。njupt。zhb。测试；导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。http。饼干；导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入组织。阿帕奇。支柱2。servletactioncontext导入com。开放式交响乐。xwork 2。行动支持；/* *@author:郑海波* web : http://blog.csdn.net/nuptboyzhb * mail :[电子邮件保护]* 2013年9月13日，中国南京*/public class TestAction扩展了操作支持{/* * * * * */private static final long serial version id=-8697049781798812644 l；/** * 通过埃阿斯获取json格式的ProgressBar值*类型：Action */public void getProgressValueByJson(){ String progressValueString=getCookie(getRequest()，' progress value ')；int进度值=整数。parsent(progress value string)；if(进度值100){进度值=0；}系统。出去。println(' getcookie :-进度值='进度值')；writeJsonString(' { \ '进度值' : \ ' '进度值' \ ' } ')；进度值=2；setCookie(getResponse()，' progressValue '，progressValue ' '，365 * 24 * 60 * 60)；}/* * * Get HttpServletrequest Object * @ return HttpServletrequest */public HttpServletrequest getRequest(){ return servletactioncontext。getRequest()；}/* * * Get HttpServletresponse Object * @ return HttpServletresponse */protected HttpServletresponse getResponse(){ return servletactioncontext。getResponse()；} /** *获取PrintWriter对象* @返回PrintWriter * @抛出IOException */受保护的PrintWriter getWriter()抛出IOException {返回此。getresponse().getWriter()；} /** * 写Json格式字符串* @ param JSON */protected void writeJsonString(String JSON){ try { GetResponse().setContentType(' text/html；字符集=UTF-8 '；this.getWriter().write(JSON)；} catch(IOexception e){ e . print stack trace()；} } /** * 获取cookie * @ param request * @ param name * @ return String */public static String getCookie(httprsvletrequest请求，字符串名称){字符串值=null尝试{ for(Cookie c :)请求。GetCooKies()){ if(c . GetName().equals(name)){ value=c . GetValue()；} } } catch(异常e){ e . print stack trace()；}返回值；} /** * 设置cookie * @ param response * @ param name * @ param value * @ param period */public static void setCookie(HttpServletresponse响应，字符串名称，字符串值，int period){ try { Cookie div=new Cookie(名称，值);div.setMaxAge(句点);回应。addCooKie(div)；} catch(异常e){ e . print stack trace()；} }}运行

将项目部署到雄猫上之后，在浏览器中输入网址，则可以看到进度条逐渐更新

源码下载：http://小哉。JB 51。net/201610/马援/JqueryProgreSbar(jb51 . net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。