1.先写个简单的注册页面及Ajax逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Regist</title>
</head>
<body>
<script>
var xmlHttp;
function createXMLHttp() {
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
}
function checkUserid(userid) {
createXMLHttp();
xmlHttp.open("POST","CheckServlet?userid="+userid);
xmlHttp.onreadystatechange = checkUseridCallback;
xmlHttp.send(null);
document.getElementById("msg").innerHTML = "正在验证...";
}
function checkUseridCallback() {
if(xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var text = xmlHttp.responseText;
if (text == "true") {
flag = false;
document.getElementById("msg").innerHTML = "repeat!";
} else {
flag = true;
document.getElementById("msg").innerHTML = "regist."
}
}
}
}
function checkForm() {
return flag;
}
</script>
<form action="regist.html" method="post" onsubmit="return checkForm()">
UserId:<input type="text" name="userid" onblur="checkUserid(this.value)"><span id ="msg"></span><br>
name:<input type="text" name="name"><br>
password:<input type="password" name="password"><br>
<input type="submit" value="regist">
<input type="reset" value="reset">
</form>
</body>
</html>
2.写个Servlet来实现后台查询
public class CheckServlet extends HttpServlet {
public static final String DBDRIVER = "com.mysql.jdbc.Driver";
public static final String DBURl ="jdbc:mysql://localhost:3306/lov";
public static final String DBUSER = "root";
public static final String DBPASS = "997103";
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
this.doPost(request,response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{
request.setCharacterEncoding("GBK");
response.setContentType("text/html");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
PrintWriter out =response.getWriter();
String userid = request.getParameter("userid");
try{
Class.forName(DBDRIVER);
conn = DriverManager.getConnection(DBURl,DBUSER,DBPASS);
String sql = "SELECT COUNT(userid) FROM user WHERE userid=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,userid);
rs = pstmt.executeQuery();
if(rs.next()){
if(rs.getInt(1)>0){
out.print("true");
}else {
out.print("false");
}
}
}catch (Exception e){
e.printStackTrace();
}finally {
try {
conn.close();
}catch (SQLException e){
e.printStackTrace();
}
}
}
}
3.在web.xml里新建servlet节点内容
<servlet>
<servlet-name>CheckServlet</servlet-name>
<servlet-class>ajaxdemo.CheckServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckServlet</servlet-name>
<url-pattern>/CheckServlet</url-pattern>
</servlet-mapping>
</servlet>
这里只是简单实现注册用户ID的Ajax验证