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 TextArea动态显示剩余字符
Oct 22 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
js事件触发操作实例分析
Jun 21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python模块之StringIO使用示例
2015/04/08 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python 多线程的实例详解
2017/09/07 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python文件操作的简单方法总结
2019/11/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python中threading开启关闭线程操作
2020/05/02 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
禁毒宣传标语
2014/06/19 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
教师工作总结范文2014
2014/11/10 职场文书
离婚协议书的范本
2015/01/27 职场文书
暂住证证明
2015/06/19 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL