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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
如何使用vue3打造一个物料库
May 08 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
php URL编码解码函数代码
2009/03/10 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue小白入门教程
2018/04/02 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
教师实习自我鉴定
2013/12/11 职场文书
自荐书模板
2013/12/15 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
挂靠协议书范本
2014/04/22 职场文书
社区服务活动总结
2014/05/07 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
师德标兵事迹材料
2014/12/19 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python