Jquery progressbar通过Ajax请求获取后台进度演示
项目源代码下载：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，则可以看到进度条逐渐更新
Jquery progressbar通过Ajax请求获取后台进度演示的更多相关文章
- jquery如何通过ajax请求获取后台数据显示在表格上
1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="ht ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- ajax请求获取的数据无法赋值给全局变量问题总结
一.总结: 1.问题描述: 今天做项目遇到在用表单显示详细信息的过程中ajax请求获取的数据无法赋值给全局变量的情况,从列表页面进入详情页,在详情页面被渲染了之后就会调用js文件里的接口向服务器请求数 ...
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- 解决ajax请求(SpringMVC后台)响应415/400/405错误
解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...
- JQuery AJAX请求aspx后台方法
利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...
- jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- jQuery选择器，Ajax请求
jQuery选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $( ...
- jquery中的ajax请求到php（学生笔记）
首先ajax的基本语法基础.(必须得引入一个jquery文件,下面的例子展示用了网上的jquery文件,要联网.) 2.请求成功(复制代码运行观察效果) <!DOCTYPE html> & ...
随机推荐
- ios 面试题 经典（比较全） 根据重点总结
史上最全的iOS面试题及答案 1.写一个NSString类的实现 + (id)initWithCString:(c*****t char *)nullTerminatedCString encodin ...
- c++实现二分查找
简要描述: 二分查找又称折半查找,优点是比较次数少,查找速度快,平均性能好:其缺点是要求待查表为有序表,且插入删除 困难. 条件:查找的数组必须要为有序数组. 二分查找的过程剩简要描述如下图: 二种实 ...
- poj 1150 The Last Non-zero Digit
/** 大意: 求A(n,m)的结果中从左到右第一个非零数 思路: 0是由2*5的得到的,所以将n!中的2,5约掉可得(2的数目比5多,最后再考虑进去即可) 那n!中2 的个数怎么求呢? int ge ...
- Regex阅读笔记(三)之固化分组
符号:?> 使用?>的匹配与正常的匹配无区别,但是如果匹配进行到此结构之后,此结构体的所有备用状态都会放弃,也就是括号内的子表达式中未尝试过的备用状态都不复存在了. 例如'(\.\d\d( ...
- Hdu 2364 Escape
Problem地址:http://acm.hdu.edu.cn/showproblem.php?pid=2364 这道题的特殊之处在于能转弯时不能直走,必须转弯,所以在行走时,要判断能否转弯,不能转弯 ...
- wiki oi 3116 高精度练习之加法
题目描述 Description 给出两个正整数A和B,计算A+B的值.保证A和B的位数不超过500位. 输入描述 Input Description 读入两个用空格隔开的正整数 输出描述 Outpu ...
- Android经常使用UI组件 - TextView
TextView是Android里面用的最多的UI组件,一般使用在须要显示一些信息的时候,其不能输入,仅仅能初始设定或者在程序中改动. 实例:TextViewDemo 执行效果: 代码清单: 布局文件 ...
- CKEditor和CKFinder整合实现上传下载功能
CKEditor与CKFinder整合并实现文件上传功能 事先说明:此整合的是java版本号的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其他框架技术) ...
- linux脚本：ftp自动传输文件
使用Shell脚本实现ftp的自动上传下载 http://liwenge.iteye.com/blog/566515 open 192.168.1.171 user guest 123456cd /h ...
- 内核必看： spinlock、 mutex 以及 semaphore
linux 内核的几种锁介绍 http://wenku.baidu.com/link?url=RdvuOpN3RPiC5aY0fKi2Xqw2MyTnpZwZbE07JriN7raJ_L6Ss8Ru1 ...