1. 搭建环境
- 页面准备
<body>
<table border="1" width="500">
<tr>
<td>用户名:</td>
<td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name=""></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>
</body>
2、 数据库准备
- 新建一个数据库，字段跟上面html的列名对应就行
Servlet代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
//1. 检测是否存在
String name = request.getParameter("name");
System.out.println("name="+name);
UserDao dao = new UserDaomImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面，到底有还是没有。
if(isExist){
response.getWriter().println(1); //存在用户名
}else{
response.getWriter().println(2); //不存在该用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
3. Dao代码
public class UserDaomImpl implements UserDao{
@Override
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from t_user where username =?";
runner.query(sql, new ScalarHandler(), username);
Long result = (Long) runner.query(sql, new ScalarHandler(), username);
return result > 0 ;
}
}
jsp页面显示
function checkUserName() {
//获取输入框的值 document 整个网页
var name = document.getElementById("name").value; // value value() val val()
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST" ,"/day16/CheckUserNameServlet" , true );
//注册状态改变监听，获取服务器传送过来的数据
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
//alert("用户名未存在");
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name="+name);
}
正在尝试写博客，把会的分享给你们，如有写的不好的地方，希望指点一下，谢谢！