ajax对注册名进行验证检测是否存在于数据库中

186 阅读 0 评论 123 点赞

我是靠谱客的博主俭朴棒棒糖，最近开发中收集的这篇文章主要介绍ajax对注册名进行验证检测是否存在于数据库中，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这个是我在网上看到的一个有错的ajax 我改正确了，却找不到那个帖子了。
用servlet验证：

复制代码代码如下:

 
package Servlet; 
import java.io.*; 
import java.sql.*; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.*; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpServlet; 
public class CheckServlet extends HttpServlet { 
static HttpServletRequest request = null; 
static HttpServletResponse response = null; 
public static void main(String[] args) throws Exception, IOException{ 
CheckServlet c = new CheckServlet(); 
c.doPost(request, response); 
} 

public static final String DBDRIVER = "com.mysql.jdbc.Driver"; 
public static final String DBURL = "jdbc:mysql://localhost:3306/spring"; 
public static final String DBUSER = "root"; 
public static final String DBPASS = "liangke"; 
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 * from user where username=?"; 
pstmt = conn.prepareStatement(sql); 
pstmt.setString(1, userid); 
rs = pstmt.executeQuery(); 
StringBuffer jsonStr=new StringBuffer(); 
jsonStr.append("[{flag:'"); 
if(rs.next()){ 
jsonStr.append("true',alertTest:'aaa'}]"); 
out.println(jsonStr.toString()); 
}else{ 
jsonStr.append("false',alertTest:'bbb'}]"); 
out.println(jsonStr.toString()); 

} 

out.close(); 
} catch (Exception e) { 
e.printStackTrace(); 
} finally { 
try { 
conn.close(); 
} catch (SQLException e) { 
e.printStackTrace(); 
} 
} 
} 
} 

前台显示页面：

复制代码代码如下:

 
<%@ page language="java" pageEncoding="utf-8"%> 
<%@ page import="java.sql.*"%> 
<%@ page import="java.util.*"%> 
<!doctype html> 
<html lang="en"> 
<body> 
<script> 
//onload 当页面加载的时候会调用这个方法initPage 
window.onload = initPage; 
function initPage() { 
alert("ee"); 
document.getElementById("userid").onblur = checkUserid;//引用函数方法。 onblur 事件在用户离开输入框时执行 JavaScript 代码 
} 
//创建请求对象 
function createRequest() { 
try { 
request = new XMLHttpRequest(); 
} catch (tryMS) { 
try { 
request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (otherMS) { 
try { 
request = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (failed) { 
request = null; 
} 
} 
} 
return request; 
} 
//检查用户名是否重复 
function checkUserid(){ 
alert("dd"); 
request=createRequest(); 
var theName = document.getElementById("userid").value; 
request.open("POST","CheckServlet?userid="+theName,true); 
request.onreadystatechange=checkUseridCallback; 
request.send(null); 
document.getElementById("msg").innerHTML="正在验证..."; 
} 
//回调函数 
function checkUseridCallback(){ 
if(request.readyState==4){ 
if(request.status==200){ 

var v = request.responseText; 
var value1= eval(v)[0]; 
if( value1.flag=="true"){ 
document.getElementById("msg").innerHTML="用户ID重复"; 
}else{ 
document.getElementById("msg").innerHTML="此用户ID可以注册"; 

} 
} 
} 
} 
</script> 
<form action="check.jsp" method="POST"> 
用户ID： 
<input type="text" id="userid" name="userid"> 
<span id="msg"></span> 
<br> 
姓名 
<input type="text" name="name"> 
</form> 
</body> 
</html> 