js--登录身份验证

今天来简单实现一下简单的登录页面，然后调用后台数据库来验证一下身份信息。

先来看下代码

HTML：

<html>
<head>
<title>登陆页面</title>
<link href="../CSS/login.css" rel="stylesheet" type="text/css"/>
<script src="../Source/jquery.js"></script>
<script src="../JS/login.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
	<div class="div_body">
		<div class="div_bodyin">
			<div class="div_log">
				<img src="../Source/02.png" style="position:relative;left:92px; width:200px; height:46px;opacity:0.5" />
			</div>
			<div class="div_login">
				<h2>USERNAME</h2>
				<label>
				<input type="text" name="textfield1" id="username" class="txt_input txt_input2" onfocus="if (value ==&#39;Your name&#39;){value =&#39;&#39;}" onblur="if (value ==&#39;&#39;){value=&#39;Your name&#39;}" value="Your name">
				</label>
				<h2>PASSWORD</h2>
				<label>
				<input type="password" name="textfield2" id="userpwd" class="txt_input" onfocus="if (value ==&#39;******&#39;){value =&#39;&#39;}" onblur="if (value ==&#39;&#39;){value=&#39;******&#39;}" value="******">
				</label>
				<label>
				<input type="submit" class="sub_button" name="button" id="button" value="SIGN-IN" style="opacity: 0.7" onclick="load()">
				</label>
			</div>
		</div>
	</div>
<script>
</script>
</body>
</html>

CSS：


body{
	background:#fff url(../Source/01.gif) ;
}
.div_body{
	width:1910px;
	height:500px;
}
.div_bodyin{
	    width: 403px;
		margin: 0 auto;
		position:relative;
		margin-top:200px;
		height: 375px;

}
.div_log{
	width: 403px;
	height:46px;
	margin-bottom:25px;
	background:#fff url(../Source/01.gif) ;
}
.div_login{
	height:302px;
	overflow:hidden;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 28px 47px 20px 47px;
	background:url(../Source/03.png) no-repeat;
	color: #4f5d80;
	font-weight: normal;
}
.txt_input{
	width: 295px;
    height: 36px;
    border: 1px solid #cad2db;
	font-size: 14px;
    color: #717171;
    font-family: Arial;
	margin-bottom: 20px;
	cursor: text;
	border-radius: 5px;
}
.sub_button{
	float: right;
    width: 122px;
    height: 32px;
    background: url(../Source/04.png) no-repeat -153px -850px;
    border: none;
    color: #FFF;
    padding-bottom: 2px;
    font-size: 14px;
    font-weight: bold;
}

JS：

function load(){
	name=$("#username").val();
	password=$("#userpwd").val();
	var s ={
			"name":name,
			"pwd":password
			};
 	$.ajax({
 		type:"post",
 		url:"http://localhost/HBUweb/Login",
 		data:s,
 		cache: false,
 	    async : false,
 	    success: function (data ,textStatus, jqXHR)
         {
 	    	var x = Number(data);
 	    	if(x>=1){
 	    		window.location.href="./success.html";
 	    	}
 	    	else{
 	    		alert("error");
 	    	}
         },
	error:function (XMLHttpRequest, textStatus, errorThrown) {      
	alert("failed");
         }
 	})
 }

servlet：

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/plain; charset=utf-8");
		String user=request.getParameter("name");
		String pwd=request.getParameter("pwd");
		System.out.println(user+"-----------------"+pwd);
		String select="select count(*) from user where UserName = '"+user+"' and Password = '"+pwd+"'";
		int a=operatedatabase.validate(select);
		if(a==1) {
			request.getSession().setAttribute("UserName", user);
		}
		response.getWriter().write(String.valueOf(a));

看下页面及效果：

当输入的用户名于密码和后台数据库不匹配的时候会弹框，当匹配的时候会跳转到其他页面。

当然这个跳转成功的页面只是个例子。。。

注意事项：

从后台调用的sql语句要书写正确。
servlet要确定要往前台传什么数据类型。常用的有response.setContentType("application/json")json格式字符串response.setContentType("text/palin")向前台传纯文本。此时要注意：如果你要传递一个整数，先把他变成字符串。要不传到前台就会变成一个点。神奇吧。。
最后来讲一下一个巨大的坑：比如你查的是判断是否有某个人的信息。最后返回一个整型值。在查询数据库的时候先对结果集resultset筛选结果。可以这样写{while(rs.next){int count=rs.getint(1); return count}}可以这样写{if(rs!=null){rs.next(),int count=rs.getint(1)}}。第二种方法注意getint的参数是1，就是得到的是第二列。第一列被行号占了。这样才能查到聚合函数count的值

js--登录身份验证

js--登录身份验证

注意事项：

猜你喜欢