欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

jquery progressbar透过ajax请求获取后台进度演示

更新时间: 2014-01-05 01:54:27 责任编辑: Author_N1

 

Jquery progressbar通过Ajax请求获取后台进度演示

项目源代码下载: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,则可以看到进度条逐渐更新



上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:54:27
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2881/
本文WWW.DOC100.NET DOC100.NET版权所有。