ajax异步请求 进度条,jQuery progressbar通过Ajax请求实现后台进度实时功能

本文主要演示Jquery progressbar的进度条功能。js通过ajax请求向后台实时获取当前的进度值。后台将进度值存储在cookie中，每次请求后，将进度条的值增2个。以此演示进度条的实时显示功能。

前台index.jsp

jsp代码如下

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

My JSP 'index.jsp' starting page

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("请求出错");

}

});

}

struts.xml文件的配置

/p>

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

后台的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.youkuaiyun.com/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，则可以看到进度条逐渐更新

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。