项目源代码下载：http://download.csdn.net/detail/nuptboyzhb/6262253

1.简介

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

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>



3.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>


4.后台的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();

	    }

	}

}



5.运行


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



  
 
												


											
Jquery progressbar通过Ajax请求获取后台进度演示的更多相关文章
	

    
								
  1. jquery如何通过ajax请求获取后台数据显示在表格上
		
    1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="ht ...
    
		
    2. 
						
  2. 用JQuery中的Ajax方法获取web service等后台程序中的方法
		
    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
    
		
    3. 
						
  3. ajax请求获取的数据无法赋值给全局变量问题总结
		
    一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...
    
		
    4. 
						
  4. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
		
    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
    
		
    5. 
						
  5. 解决ajax请求(SpringMVC后台)响应415/400/405错误
		
    解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private  ...
    
		
    6. 
						
  6. JQuery AJAX请求aspx后台方法
		
    利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...
    
		
    7. 
						
  7. jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo
		
    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
    
		
    8. 
						
  8. jQuery选择器，Ajax请求
		
    jQuery选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $( ...
    
		
    9. 
						
  9. jquery中的ajax请求到php（学生笔记）
		
    首先ajax的基本语法基础.(必须得引入一个jquery文件,下面的例子展示用了网上的jquery文件,要联网.) 2.请求成功(复制代码运行观察效果) <!DOCTYPE html> & ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 写一个背景渐变的TextView输入框
			
    1:在res文件夹下新建一个drawble文件夹,并新建一个背景文件如writebg.xml <?xml version="1.0" encoding="utf-8 ...
    
			
    2. 
						
  2. Css小技巧-图片垂直居中
			
    说明:样式设置主要是针对图片的父级元素,并非图片元素本身. Css代码[图片父级点的样式]: <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: ...
    
			
    3. 
						
  3. python优秀库 － 使用xmltodict解析xml文档
			
    上次讲到如何使用BeautifulSoup解析XML文档,今天发现另外一个python库xmltodict(https://github.com/martinblech/xmltodict)也很简单. ...
    
			
    4. 
						
  4. Mac编程（QT有许多专门的资料）
			
    Mac OS X 上在应用运行时,在Dock上的图标右键会有额外的菜单部分.参考iTunes运行时右键的菜单.使用Qt在Mac下的一个set_menu(QMenu *)函数实现,文档里有写 http: ...
    
			
    5. 
						
  5. perl学习(4) 子程序
			
    子程序,类比c语言中的函数,在形式上个人认为最大的区别:没有形参 1.1.定义子程序 1.2.调用 #! /usr/bin/perl sub marine { $n += 1 ; print &quo ...
    
			
    6. 
						
  6. 2-06. 数列求和（20）（ZJUPAT 数学）
			
    题目链接:http://pat.zju.edu.cn/contests/ds/2-06 给定某数字A(1<=A<=9)以及非负整数N(0<=N<=100000).求数列之和S  ...
    
			
    7. 
						
  7. 自定义UISlider的样式和滑块
			
    又做完一个项目,遂到了写帖时间了,要跟大家分享的是:自定义UISlider的图片和滑块,先看一下效果: 然后是实现了,我们使用的是UISlider的setMinimumTrackImage,和setM ...
    
			
    8. 
						
  8. (void)(&amp;x==&amp;y)
			
    #define max(x,y) ({ \ typeof(x) _x = (x);    \ typeof(y) _y = (y);    \ (void) (&_x == &_y); ...
    
			
    9. 
						
  9. iOS弹出底部视图简单实现
			
    - 项目基本目录 其中xib文件用来自定义需要弹出的视图. 在主控制器里设置popview的frame等信息代码如下: 底部视图(popview)初始化放在父类视图的最顶部或者说是整个屏幕的最底部,宽 ...
    
			
    10. 
						
  10. BZOJ 2134: 单选错位( 期望 )
			
    第i个填到第i+1个的期望得分显然是1/max(a[i],a[i+1]).根据期望的线性性, 我们只需将每个选项的期望值累加即可. ---------------------------------- ...
    
			
    11.