50,503
社区成员
发帖
与我相关
我的任务
分享
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="css/regist.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
.red {
color: OrangeRed;
}
.green {
color: SpringGreen;
}
</style>
</head>
<body>
<div class="wrapper">
<article>
<h1>注册</h1>
<div class="main">
<form>
<div class="userName">
<input type="text" name="userName" id="name" placeholder="用户名">
<span id="span01"></span>
</div>
<div class="password">
<input type="password" name="pwd" placeholder="密码">
</div>
<div class="againpwd">
<input type="password" name="pwd" placeholder="确认密码">
</div>
<div class="tel">
<input type="tel" name="userName" placeholder="手机号">
</div>
<button>注册</button>
</form>
</div>
</article>
<footer>
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">友情链接</a></li>
<li><a href="#">公司地址</a></li>
<li><a href="#">关注我们</a></li>
</ul>
</footer>
</div>
<table border="1" width="500">
<tr>
<td>用户名</td>
<td><input type="text" name="" id="name" placeholder="请输入用户名" />
<span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" name="password" placeholder="请确认密码"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>简介</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
JQ部分的
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try { // Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {// Internet Explorer
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
}
}
}
return xmlHttp;
}
var na = document.getElementById("name");
na.onblur = function() {
var name = na.value;
var request = ajaxFunction();
request.open("POST", "/ajax/CheckUsernameServlet", true);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
var data = request.responseText;
var span = document.getElementById("span01");
if (data == 1) {
span.innerHTML = "用户名已存在!";
span.className = "red";
} else {
span.innerHTML = "用户名可用!";
span.className = "green";
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
</script>
</body>
</html>
package com.ajax.servlet;
import java.io.IOException;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ajax.dao.UserDao;
import com.ajax.dao.impl.UserDaoImpl;
@WebServlet("/CheckUsernameServlet")
public class CheckUsernameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaoImpl();
boolean isE = dao.checkName(name);
if(isE) {//存在,重名了
response.getWriter().println(1);
}else {//不存在,可用
response.getWriter().println(2);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}