JSP页面ajax提交登录数据demo

浏览数：56 / 时间：2015年06月09日

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/reset.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/login.css">
<script src="${pageContext.request.contextPath}/js/lib/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/lib/AntMove.js"></script>
<script>
$(function(){
	$("#btn").click(function(){
		var $_login = $("#loginForm").get(0);
		var $_tip = $("#tip").get(0);
		/* 
		 */
		var userName = $(".userName");
		var password = $(".password");
		var tip = "";
		if( $.trim( userName.val() ) == "" ){
			tip = "帐号不能为空";
			userName.focus();
		}else if( !/^\w{5,20}$/.test( userName.val() ) ){
			tip = "帐号长度必须5-20之间";
			userName.focus();
		}else if($.trim( password.val() ) == ""){
			tip = "密码不能为空";
			password.focus();
		}
		if(tip != ""){ //如果tip有值提示错误信息
			alert(tip);
		}else{ //发送ajax请求
			$.ajax({
				url:"${pageContext.request.contextPath}/loginAjax.action",//ajax的请求地址
				type:"post",//请求方式
				dataType:"json",//返回数据为json
				data:$("#form").serialize(), //$("#loginForm").serialize() 序列化
				async:true, //是否异步 true为异步,false为同步
				success:function(data){ //异步成功回调
					console.log(data);
					if(data.success == "1"){
						alert(data.tip);
						window.location = "${pageContext.request.contextPath}/index.action";
						
					}else if(data.success == "0"){
						antMove($_login,{top:60},1000,"elasticOut",function(){
						$(".tip").css("display","block");
						antMove($_tip,{top:0},1000,"elasticOut");});
					}
				},
				error:function(msg){ //ajax失败回调
					alert("ajax发送失败:"+msg);
				}
			});
		}
	});	
});
</script>
</head>

<body>

<div id="login">
	<!-- 
		<div class="logo">
    		<a href=""><img src="${pageContext.request.contextPath}/images/logo.png"></a>
    	</div>
	 -->
    <div class="tipParent">
        <div id="tip" class="tip">
            <strong>错误 : </strong>
            <span>无效用户名。</span>
            <a href="">忘记密码?</a>
        </div>
    </div>
    <div class="formParent">
        <div id="loginForm" class="loginForm">
            <form id="form">
                <div class="loginName">
                    <label>用户名</label>
                    <input type="text" value="admin" class="userName" name="userName">
                </div>
                <div class="loginPassword">
                    <label>密码</label>
                    <input type="text" class="password" name="password">
                </div>
                <div class="loginBtn">
                    <input type="checkbox">
                    <span>记住我的登录信息</span>
                    <input type="button" value="" class="btn" id="btn">
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JSP页面ajax提交登录数据demo