jQuery progressbar通過Ajax請求實現後台進度實時功能

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery progressbar通過Ajax請求實現後台進度實時功能

編輯：JQuery入門技巧

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

源碼下載：http://xiazai.jb51.net/201610/yuanma/jqueryProgressbar(jb51.net).rar

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

上一頁:將form表單通過ajax實現無刷新提交的簡單實例
下一頁:最原始的jQuery注冊驗證方式

JQuery入門技巧

基於jquery實現的銀行卡號每隔4位自動插入空格的實現代碼: 難點不是插入空格，而是修正光標的位置，這個只支持IE9＋、chrome浏覽器注意：這個使用了jque
關於Jquery中的bind(),on()綁定事件方式總結: 一.bind()使用方式：$(selector).bind(event,data,function)
如何編寫jquery插件: 前面的話編寫插件的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重復使用，提高開發效率和

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章