jQuery progressbar通過Ajax請求實現后臺進度實時功能

2019-11-20 08:46:49

字體：大中小

來源：轉載

供稿：網友

本文主要演示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，則可以看到進度條逐漸更新