jQuery progressbar通過(guò)Ajax請(qǐng)求實(shí)現(xiàn)后臺(tái)進(jìn)度實(shí)時(shí)功能
本文主要演示Jquery progressbar的進(jìn)度條功能。js通過(guò)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; /** * 通過(guò)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)度條逐漸更新
源碼下載:http://xiazai.jb51.net/201610/yuanma/jqueryProgressbar(jb51.net).rar
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
- jquery+php+ajax顯示上傳進(jìn)度的多圖片上傳并生成縮略圖代碼
- jquery ajax實(shí)現(xiàn)文件上傳功能實(shí)例代碼
- jQuery插件ajaxFileUpload異步上傳文件
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- 基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
相關(guān)文章
jQuery學(xué)習(xí)筆記之 Ajax操作篇(一) - 數(shù)據(jù)加載
Ajax 通俗來(lái)講即不需要刷新頁(yè)面即可從服務(wù)器或客戶端上加載數(shù)據(jù),當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。2014-06-06artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
artDialog是一個(gè)輕巧且高度兼容的javascript對(duì)話框組件,可讓你的網(wǎng)頁(yè)交互擁有桌面軟件般的用戶體驗(yàn)2012-07-07Labelauty–jQuery單選框/復(fù)選框美化插件分享
這篇文章主要介紹了Labelauty–jQuery單選框/復(fù)選框美化插件,能夠?qū)崿F(xiàn)單選框/復(fù)選框原本的選中、未選中、禁用等功能外,還能夠設(shè)置選中和未選中的文本信息、標(biāo)簽的最小寬度等,感興趣的小伙伴可以參考下。2015-09-09jquery 多行滾動(dòng)代碼(附詳細(xì)解釋)
在網(wǎng)上可以隨處找到這段代碼,但是沒有任何人解釋這段代碼,只要自己研究好久。2010-06-06jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法
本篇文章主要是對(duì)jquery.ajax的url中傳遞中文亂碼問(wèn)題的解決方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼??芍苯訌?fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01