Jquery progressbar通过Ajax请求获取后台进度演示
来源:互联网 发布:linux移动文件夹 编辑:程序博客网 时间:2024/06/16 09:40
项目源代码下载: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请求获取后台数据显示在表格上
- jquery-esayui自定义按钮通过ajax请求后台跳转页面
- 通过jquery封装的ajax获取后台json数据
- 页面通过jquery上的ajax请求到后台通过POI导出Excel的问题
- jQuery Ajax 实例演示-获取json数据
- jQuery之异步Ajax请求使用 通过传递参数来调用后台方法返回状态
- Jquery使用Ajax请求调用后台
- JQuery AJAX请求aspx后台方法
- jquery ajax请求后台 的简单例子
- vue请求后台演示
- 通过jquery执行ajax取出后台数据
- jquery datatable 通过ajax从后台获取每个分页数据后,搜索框无法搜索问题
- 通过JQuery中的ajax请求数据
- 在jquery通过ajax发送异步请求
- JQuery-Ajax获取后台返回的字符串。
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明
- jquery通过ajax-json访问java后台传递参数,通过request.getParameter获取不到参数的说明
- 双缓冲绘图
- 友元函数和友元类
- ListBox用法
- 网站优化中nofollow标签只是屏蔽权重值传递
- 10.3.6 TCP传输连接建立方案
- Jquery progressbar通过Ajax请求获取后台进度演示
- inux运行时I/O设备的电源管理框架
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- printf函数和cout参数压栈问题
- Redhat 6.2 Linux修改yum源免费使用CentOS源
- 仿微信摇一摇
- 在链表里如何发现循环链接
- JDK中的URLConnection参数详解
- JSON串操作