使用JQuery实现校验用户名
上一篇使用Ajax来校验用户名,不知道的可以看下这篇Ajax校验用户名,实现的效果是一样的,但是相对于Jquery来说代码比较多一点,现在用jQuery也来实现一下
- 新建一个数据库,字段与html的列名对应就行
- 使用jQuery之前需要导入一个js代码,也就是一个包吧——jquery-1.11.3.min.js,这是1版本的,感兴趣的朋友们可以去下载最新的,现在最新的好像是3版本
html:
<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>
jsp里面使用jQuery
function checkUserName() {
//1. 获取输入框的内容
var name = $("#name").val();
//2. 发送请求
$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
//alert(data);
if(data == 1){//用户名存在
//alert("用户名存在");
$("#span01").html("<font color='red'>用户名已被注册</font>");
}else{
//alert("用户名可用");
$("#span01").html("<font color='green'>用户名可以使用</font>");
}
} );
//3. 输出响应的数据到页面上。
}
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();
}
}
DaoImpl:用于实现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 ;
}
}
Dao:用于判断用户
import java.sql.SQLException;
public interface UserDao {
/**
* 用于检测用户名是否存在
* @param username
* @return true : 存在 ,false : 不存在
*/
boolean checkUserName(String username) throws SQLException;
}
效果图:
正在尝试写博客,把会的分享给你们,如有写的不好的地方,希望指点一下,谢谢!