Jquery progressbar透过Ajax请求获取后台进度演示-AJAX教程-爱易网页

Jquery progressbar透过Ajax请求获取后台进度演示

日期：2014-05-16　浏览次数：20695 次

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代码（）

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Jquery progressbar透过Ajax请求获取后台进度演示

相关资料更多>

推荐阅读更多>