jQuery progressbar通过Ajax请求实现后台进度实时功能


Posted in Javascript onOctober 11, 2016

本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中,每次请求后,将进度条的值增2个。以此演示进度条的实时显示功能。

前台index.jsp

jsp代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<!DOCTYPE html>
<html>
 <head>
 <base href="<%=basePath%>">

 <title>My JSP 'index.jsp' starting page</title>
 <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="js/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="js/demo/demo.css">
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
 <script type='text/javascript'>
 var timerId;
 $(function(){
 //每隔0.5秒自动调用方法,实现进度条的实时更新
 timerId=window.setInterval(getForm,500);
 });
 function getForm(){
   //使用JQuery从后台获取JSON格式的数据
   $.ajax({
    type:"post",//请求方式
    url:"getProgressValueByJson",//发送请求地址
    timeout:30000,//超时时间:30秒
    dataType:"json",//设置返回数据的格式
    //请求成功后的回调函数 data为json格式
    success:function(data){
     if(data.progressValue>=100){
      window.clearInterval(timerId);
     }
     $('#p').progressbar('setValue',data.progressValue);
    },
    //请求出错的处理
    error:function(){
     window.clearInterval(timerId);
     alert("请求出错");
    }
   });
 }
 </script>
 </head>
 <body>
  <div style="margin:100px 0;"></div>
  <div id="p" class="easyui-progressbar" style="width: 400px;"></div>
 </body>
</html>

struts.xml文件的配置 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
 "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
 <constant name="struts.devMode" value="true" />
 <package name="front" extends="struts-default" namespace="/">
  <action name="getProgressValueByJson" class="edu.njupt.zhb.test.TestAction" method="getProgressValueByJson">
   <result name="success"></result>
  </action>
  <action name="TestAction" class="edu.njupt.zhb.test.TestAction">
   <result type="httpheader"></result>
  </action>
 </package>

</struts>

后台的java代码() 

package edu.njupt.zhb.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
/*
 *@author: ZhengHaibo 
 *web:  http://blog.csdn.net/nuptboyzhb
 *mail: zhb931706659@126.com
 *Sep 13, 2013 Nanjing,njupt,China
 */
public class TestAction extends ActionSupport {
 /**
 * 
 */
 private static final long serialVersionUID = -8697049781798812644L;
 /**
 * 通过Ajax获取json格式的ProgressBar值
 * Type:Action
 */
 public void getProgressValueByJson(){
 String progressValueString = getCookie(getRequest(),"progressValue");
 int progressValue = Integer.parseInt(progressValueString);
 if(progressValue>100){
 progressValue = 0;
 }
 System.out.println(" getCookie:---progressValue="+progressValue);
 writeJsonString("{\"progressValue\":\"" + progressValue + "\"}"); 
 progressValue += 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();
 }

 /**
 * Get PrintWriter Object
 * @return PrintWriter
 * @throws IOException
 */
 protected PrintWriter getWriter() throws IOException {
 return this.getResponse().getWriter();
 }

 /**
 * 写Json格式字符串
 * @param json
 */
 protected void writeJsonString(String json) {
 try {
 getResponse().setContentType("text/html;charset=UTF-8");
 this.getWriter().write(json);
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 
 /**
 * 获取cookie
 * @param request
 * @param name
 * @return String
 */
 public static String getCookie(HttpServletRequest request, String name) {
 String value = null;
 try {
 for (Cookie c : request.getCookies()) {
 if (c.getName().equals(name)) {
  value = c.getValue();
 }
 }
 } catch (Exception e) {
 e.printStackTrace();
 }
 return value;
 }
 
 /**
 * 设置cookie
 * @param response
 * @param name
 * @param value
 * @param period
 */
 public static void setCookie(HttpServletResponse response, String name, String value, int period) {
  try {
   Cookie div = new Cookie(name, value);
   div.setMaxAge(period);
   response.addCookie(div);

  } catch (Exception e) {
   e.printStackTrace();
  }
 }
}

运行

将项目部署到Tomcat上之后,在浏览器中输入URL,则可以看到进度条逐渐更新

jQuery progressbar通过Ajax请求实现后台进度实时功能

源码下载:http://xiazai.3water.com/201610/yuanma/jqueryProgressbar(3water.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
详解js前端代码异常监控
Jan 11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
vue实现在线学生录入系统
May 30 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
最原始的jQuery注册验证方式
Oct 11 #Javascript
js正则表达式注册页面表单验证
Oct 11 #Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 #Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 #Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
小程序自定义日历效果
2018/12/29 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python字符串string的内置方法实例详解
2018/05/14 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
党建工作先进材料
2014/05/02 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
授权委托书样本
2014/09/25 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript