一:創建數據庫
簡要創建數據庫,數據庫名稱爲 user 創建表 users 字段name pass 如圖:
二:創建註冊界面:
<html>
<head>
<title>My Ajax</title>
<script type="text/javascript">
window.onload = function(){
var nameV= document.getElementsByName("name")[0];
nameV.onblur = function(){
var name = this.value;
var re = new XMLHttpRequest();
re.open("GET", "Yanz?name="+name);
re.onreadystatechange = function(){
if(re.readyState==4)
{
if(re.status==200)
{
var tsy = document.getElementById("tsy");
if(re.responseText=="true")
{
tsy.innerHTML= "存在";
tsy.style.color="lime";
}
else
{
tsy.innerHTML="可以";
tsy.style.color="red";
}
}
}
}
re.send(null);
}
}
</script>
</head>
<body>
用戶名:<input type="text" name="name" /> <span id="tsy"></span>
<br>密碼:<input type="password" name="pwd" >
<input type="submit" value="提交">
</body>
</html>
三:創建Servlet進行處理:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter writer = response.getWriter();
String name = request.getParameter("name");
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String url="jdbc:mysql://127.0.0.1:3306/user";
String user="root";
String password = "root";
try {
Connection conn = DriverManager.getConnection(url, user, password);
String sql = "select * from users ";
PreparedStatement ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
String users = null;
StringBuffer sb = new StringBuffer();
while(rs.next())
{
sb.append(rs.getString("name"));
sb.append(",");
}
// System.out.println(sb);
String names= sb.toString();
// System.out.println(names);
String[] names2 = names.split(",");
for(int i = 0;i<names2.length;i++)
{
//System.out.println(names2[i].equals(name));
if(names2[i].equals(name))
{
writer.print(true);
break;
}
}
rs.close();
ps.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
四:進行測試
當輸入aa時,數據庫中有記錄,鼠標移出輸入框時,將給出“存在”的提示。
同理,當輸入“zhang”時,數據庫中有記錄,仍給出“存在”的提示。
當輸入數據庫中不存在的記錄時,給出“可以”的提示。
大致功能就是實現這個功能。簡單的測試,很多分層的地方直接現在了一起。