利用ajax和Java实现登录验证的小例子

1.javabean

package com.jia.bean;

public class Student {
	private String id;
	private String name;
	private String sex;
	private String password;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
}

这里设置的是一个Student类,包括了编号、姓名、性别和密码四个属性,验证只用到了编号和密码这两个属性。

2.账号密码检验

public int checkStudent(String  id,String password) {
		// TODO Auto-generated method stub
		int result = 0;
		Connection con=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		Student student=null;
		String sql="select * from student where id=?"; //表格名称为student
		try {
			con=Conjdbc.getCon(); //这个地方单独编写了一个获取连接的方法
			ps=con.prepareStatement(sql);
			ps.setString(1, id);
			rs=ps.executeQuery();			
			if (rs.next()) {
				student=new Student();
				student.setId(rs.getString(1));
				student.setPassword(rs.getString(4));
			}
			if (student==null) {
				return 0;
			}
			else if (!student.getPassword().equals(password)) {
				return -1;
			}
			else {
				return 1;
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		Conjdbc.closeCon(rs, ps, con);
		return result;
	}

检验分成了三种情况1.用户不存在,返回0     2.用户存在密码错误,返回-1    3.用户和密码都正确。

3.对应的Servlet

public class LoginCheck extends HttpServlet {
	

	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)  {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)  {
		PrintWriter pw = null;
		int result=0;		
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8"); 
			pw=response.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}		
		String id="", password="";
		id = request.getParameter("u");
		password = request.getParameter("p");
		result = ConStudentDAO.getInstance().checkStudent(id, password); //单例	
		if (result==0) {					 
			pw.print("用户不存在!");
		} 
		else if (result==-1) {
			pw.print("密码错误!");
		}
		else {
			pw.print("登录成功!");
		}
	}
}

这个部分对前台传过来的数据进行数据库查询,判断属于哪种情况将信息返回给前台。其中一定要注意字符编码问题,一般网页都使用的utf-8来编码。

4.前端设计

<div class="login" >
	<h1>Login</h1>
	<form > 
		<input type="text" id="uname" name="u" placeholder="用户名" required="required" />
		<input type="password" id="pword" name="p" placeholder="密码" required="required" />
		<button type="button" class="btn btn-primary btn-block btn-large" onclick="loadCheck()">登录</button>
		<div id="insert" style="color:red;padding:10px;font-size:12px"></div>
	</form>
</div>

这部分是表单,其中最下面的div用来显示后台返回的信息。

<script type="text/javascript">
	var xmlhttp;
	function loadCheck(){
		var uname=document.getElementById('uname').value;
		var pword=document.getElementById('pword').value;
		if(uname.length==0||pword.length==0){alert("账号或密码为空");return;}
		if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();}
		else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}	
		xmlhttp.onreadystatechange=getResult;
		xmlhttp.open("POST","Demo",true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("u="+uname+"&p="+pword);		
	}
	
	function getResult(){
		if (xmlhttp.readyState==4) {		
			if(xmlhttp.status==200){
				var rec=xmlhttp.responseText;
				document.getElementById("insert").innerHTML=rec;
			}
			else{
				alert("连接失败");
			}
		}
	}
</script>

这部分的js将表单的数据传到后台,接收后台的信息嵌入到前面的div中,有个要注意的问题是xmlhttp.resposeText应该写在200d的判断条件下,不然可能接收到的数据可能会变成问号。

5.结果展示

6.总结

在这个小例子的编写中学到了很多,例如关于Servlet,每一个servlet都只会创建一个实例,而多线程是用在其中的如doPost方法中的,servlet类中的成员变量是所有连接共享的。

展开阅读全文

没有更多推荐了,返回首页