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

最新推荐文章于 2024-03-19 05:50:48 发布

莫川

最新推荐文章于 2024-03-19 05:50:48 发布

阅读量1.3w

点赞数 4

分类专栏：【java】

本文链接：https://blog.csdn.net/nupt123456789/article/details/11653473

版权

【java】专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

莫川

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
4
评论
Jquery progressbar通过Ajax请求获取后台进度演示

1.简介本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中，每次请求后，将进度条的值增2个。以此演示进度条的实时显示功能。2.前台index.jspjsp代码如下<%String path = request.getContextPath();String basePath =
复制链接

扫一扫