利用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类中的成员变量是所有连接共享的。