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 多级checkbox选择效果
Aug 20 Javascript
js更优雅的兼容
Aug 12 Javascript
js切换光标示例代码
Oct 10 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 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
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
python访问sqlserver示例
2014/02/10 Python
python时间整形转标准格式的示例分享
2014/02/14 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
个性发展自我评价
2014/02/11 职场文书
借款担保书范文
2014/05/13 职场文书
社区科普工作方案
2014/06/03 职场文书
逃课检讨书
2015/01/26 职场文书
行政二审代理词
2015/05/25 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书