关闭

jsp 登陆等待5s jquery

668人阅读 评论(0) 收藏 举报
分类:

Demo

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript">
	/*<![CDATA[*/
	
	$(document).ready(function () {

		var value = $('#button input').val();
		var name = $('#button input').attr('name');
		
		$('#button input').remove();
		$('#button').html('<a href="#" class="cssSubmitButton" rel=' + name + '>' + value + '</a>');	
		
		$('#button a').live('click', function () {			

			//You can use default form submission or with the ajax call below
			//In this example, I'm using a dummy php call so that you can see the loading animation
			//$('form[name=' + $(this).attr('rel') + ']').submit();			
			
			var link = $(this);
			
			$.ajax({
				url : 'NewFile.jsp',
				data: '',
				type: 'GET',
				cache: 'false',
				beforeSend: function () {
					link.addClass('loading');					
				},
				success: function () {
					link.removeClass('loading');
					$("#zz").submit();
					//alert('Submitted');
				}			
			});
			
		});
		
	});
	
	/*]]>*/
	</script>
	
	<style type="text/css">	
		body {
			font-family: arial;
			font-size:12px;
			margin:10px;	
			text-align:center;
		}
		
		form {
			margin:0 auto; 
			text-align:left;
			width:270px;
			border:1px solid #ccc;
			padding:15px;
			background:#fff;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			box-shadow: 0 0 4px #ccc; 
			-webkit-box-shadow: 0 0 4px #ccc; 
			-moz-box-shadow: 0 0 4px #ccc;
		}
		
		fieldset {
			overflow:hidden;
			border:0;
			height:30px;	
			margin:3px 0;
		}
		
		fieldset label {
			display:block;
			width:50px;
			float:left;
			font-weight:700;
			color:#666;	
			line-height:2.2em;
		}
		
		fieldset input {
			float:left;
			border:1px solid #ccc;	
			height: 20px;
			padding:3px;
			width:190px;
			font-size:12px;
		}
		
		#button {
			margin-top:10px;
			padding-right:20px;
			text-align:right;	
		}

		#button input {
			margin:0 auto;
		}		

		a.cssSubmitButton {			
			font-size: 12px;
			background: #fff no-repeat 4px 5px;
			display: inline-block;
			padding: 5px 20px 6px;
			color: #333;
			border:1px solid #ccc;
			text-decoration: none;
			font-weight: bold;
			line-height: 1.2em;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			-moz-box-shadow: 0 1px 3px #999;
			-webkit-box-shadow: 0 1px 3px #999;
			position: relative;
			cursor: pointer;
			outline:none;
		}
		
		a.cssSubmitButton:visited {}
		
		a.cssSubmitButton:hover {
			border:1px solid #333;
		}
		
		.loading {
			background-image:url('load.gif') !important;
			color:#ccc !important;	
			-moz-box-shadow: 0 0 0 #fff !important;
			-webkit-box-shadow: 0 0 0 #fff !important;
		}

		.effect {
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;	
		}

	</style>
</head>
<body>

<form method="post" action="a.jsp" id="zz" name="subscribeForm">
	<fieldset>
		<label>Name: </label><input type="text" class="effect" name="name">
	</fieldset>

	<fieldset>
		<label>Email: </label><input type="text" class="effect" name="email">
	</fieldset>

	<div id="button">
		<input type="submit" value="Subscribe" name="subscribeForm"/>
	</div>
</form>


</body>
</html>

NewFile.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<% Thread.sleep(5000); %>
</body>
</html>




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

小米5S刷机认真看一眼就能会的简单详细教图文

一、准备工作 1、注册小米账号:点击注册(已有小米账号请忽视) 2、在手机中登陆【小米账号】 3、下载并解压【小米解锁工具】或 点击这里下载安装 或 百度云下载 二、开始解锁 ...
  • qq_39836362
  • qq_39836362
  • 2017-12-04 22:58
  • 311

jquery实现页面等待时的交互效果

探索这个是因为前端在请求后台有时候需要较长的一段时间,如果不给不用户一些提示性的消息,如正在加载之类的,用户可能会以为页面已死,所以还是得简单的做点交互才行。 思路如下: 在触发请求后台之前便开始等待...
  • werewolf_st
  • werewolf_st
  • 2015-10-17 17:25
  • 6521

一个jquery插件,页面上的等待提示

New Document /** * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil....
  • thc1987
  • thc1987
  • 2015-04-15 14:55
  • 3103

iOS 的 APP 在系统中如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸?

iOS 的 APP 在系统中如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸? iOS开发如何标准化的适应新的iPhone 5s/iPhone6/6 Plus,是否有一种一劳永...
  • a351945755
  • a351945755
  • 2014-10-31 00:22
  • 18067

jquery Mobile点击显示加载等待效果

点击某个按钮或链接时,触发等待加载效果: <!-- $(document).bind("mobileinit", function(){ }); $( function() { ...
  • gundumw100
  • gundumw100
  • 2017-04-10 18:55
  • 207

在jsp中引入jQuery

但今天遇到一个问题,我使用了上面各种方式都引入失败,返回404错误! 为什么呢?后来想起我使用的是springmvc,在配置的时候可能会影响到静态文件的使用,如js、css。
  • zp0203
  • zp0203
  • 2016-11-24 11:38
  • 5864

JSP中如何使用JQuery?

转载自:http://blog.csdn.net/chenxingyi123/article/details/6321555 首先要导入JQuery的包文件,可以在这里 下载。 然后在...
  • u012377333
  • u012377333
  • 2015-12-03 11:46
  • 3054

jquery和jsp常用功能点汇总

1、按钮只读功能新增和取消: $("#queryDataCountByParams").attr("disabled", true); $("#queryDataCountByParams").rem...
  • tomcat_2014
  • tomcat_2014
  • 2015-12-24 10:03
  • 605

Java项目在jsp页面中引入jquery框架的步骤

http://www.cnblogs.com/wxjnew/p/3831796.html 环境:在Java  web项目中引入juqery框架 工具:MyEclipse8.5 [...
  • luofeixiongsix
  • luofeixiongsix
  • 2015-11-17 09:03
  • 13796

jQuery下实现等待指定元素加载完毕

先声明下这个方法的使用场合,以免误导大家。。比如在博客园,我们没法修改他的源代码,那么只能想办法监视元素的出现了。所以下面方法是在修改不了源码的情况下使用,而非写自己的项目。。 今天在改博客几个...
  • dyllove98
  • dyllove98
  • 2013-07-10 11:31
  • 729
    个人资料
    • 访问:834361次
    • 积分:13029
    • 等级:
    • 排名:第1206名
    • 原创:420篇
    • 转载:267篇
    • 译文:0篇
    • 评论:39条
    文章分类
    最新评论