jQuery progressbar通過Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能

更新時(shí)間：2016年10月11日 14:43:18 作者：you Richer

這篇文章主要介紹了jQuery progressbar通過Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文主要演示Jquery progressbar的進(jìn)度條功能。js通過ajax請(qǐng)求向后臺(tái)實(shí)時(shí)獲取當(dāng)前的進(jìn)度值。后臺(tái)將進(jìn)度值存儲(chǔ)在cookie中，每次請(qǐng)求后，將進(jìn)度條的值增2個(gè)。以此演示進(jìn)度條的實(shí)時(shí)顯示功能。

前臺(tái)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秒自動(dòng)調(diào)用方法，實(shí)現(xiàn)進(jìn)度條的實(shí)時(shí)更新
 timerId=window.setInterval(getForm,500);
 });
 function getForm(){
   //使用JQuery從后臺(tái)獲取JSON格式的數(shù)據(jù)
   $.ajax({
    type:"post",//請(qǐng)求方式
    url:"getProgressValueByJson",//發(fā)送請(qǐng)求地址
    timeout:30000,//超時(shí)時(shí)間：30秒
    dataType:"json",//設(shè)置返回?cái)?shù)據(jù)的格式
    //請(qǐng)求成功后的回調(diào)函數(shù) data為json格式
    success:function(data){
     if(data.progressValue>=100){
      window.clearInterval(timerId);
     }
     $('#p').progressbar('setValue',data.progressValue);
    },
    //請(qǐng)求出錯(cuò)的處理
    error:function(){
     window.clearInterval(timerId);
     alert("請(qǐng)求出錯(cuò)");
    }
   });
 }
 </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>

后臺(tái)的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;
 }
 
 /**
 * 設(shè)置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();
  }
 }
}

運(yùn)行

將項(xiàng)目部署到Tomcat上之后，在瀏覽器中輸入U(xiǎn)RL，則可以看到進(jìn)度條逐漸更新