您的位置：首页 > 其它

Ajax异步请求-校验用户名的唯一性

2017-11-08 16:23 381 查看

本项目的后台没有采用框架，但采用了MVC的分层结构，使项目结构清晰化，便于维护。

包说明:

　　1）dao层: dao层是数据访问层，该层中定义了项目的功能模块接口，给出了项目的设计规范。总的来说，该层中只考虑项目所需的功能，而不去考虑项目需要实现的细节，属于总体设计。

　　2）daoimpl层: 该层是dao的实现层, 该层中的类均实现各自对应的dao接口，daoimpl层是dao层的具体实现。

　　3）service层: service层是提供一些基础性的数据服务层，主要负责数据的组装。

　　5）db包: 该包中主要存放数据库相关的配置文件，数据库链接工具类等。

　　6）entity包: 该包中存放项目中需要使用的实体类, 通常实体类中的字段和数据库中的字段应该保持一致。

　　7）utils包: 该包中存放项目中使用的工具类。

　　8）filter包: 该包中存放项目中使用的过滤器，这里存放的是字符编码过滤器。

运行环境：JDK1.8, Oracle 11g 简版， Windows 7, Tomcat8.0

开发工具: Eclipse 4.6 Mars（集成了javaEE环境）

运行截图:

项目结构图:

后台：

前台：

完整项目结构图:

核心代码:

UserDaoImpl类:

public class UserDaoImpl implements UserDao{
private Connection conn;
private PreparedStatement ps;
private ResultSet rs;
public UserDaoImpl(Connection conn) {
this.conn = conn;
}
@Override
public boolean checkUsername(String username) {
String sql = "select * from tb_user where username = ?";
try {
ps = conn.prepareStatement(sql);
ps.setString(1, username);
rs = ps.executeQuery();
//返回查询到的行数， 如果没有查到， 返回0
if(rs.next()){
return true;
}
} catch (SQLException e) {
e.printStackTrace();
}
return false;
}
}

UserService类:

public class UserService {

UserDao userDao;

public UserService() {
userDao = new UserDaoImpl(DBUtil.getConn());
}

//核对用户名
public boolean checkName(String username){
return userDao.checkUsername(username);
}
}

CheckUserNameServlet类:

@WebServlet("/checkUserNameServlet.do")
public class CheckUserNameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String form = request.getParameter("form");
String username = request.getParameter("username");
PrintWriter pw = response.getWriter();
System.out.println(username);
if(form == null){
form = "";
}
switch (form) {
case "check":
checkUserNameChange(username, request, pw);
break;
default:
break;
}
}
private void checkUserNameChange(String username, HttpServletRequest request, PrintWriter pw) {
Map<String, String> map = new HashMap<>();
UserService us = new UserService();
boolean isExist = us.checkName(username);
if(isExist){
map.put("res", "用户名已经存在");
}else{
map.put("res", "可以使用");
}
//返回json格式的字符串给浏览器
pw.print(JsonUtil.obj2json(map));
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

前台JSP:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<!--修正IE浏览器渲染效果的问题-->
<meta<
cf0d
/span> http-equiv="X-UA-Compatible" content="IE=edge">
<!--内容自适应-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户名唯一性校验</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<form class="myform form-horizontal">
<!-- 用户名 -->
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="username" id="username" placeholder="用户名">
</div>
<label class="col-sm-2" id="display"><b>*</b></label>
</div>
<!-- 密码 -->
<div class="form-group ">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-8">
<input class="form-control" type="text" name="password" id="password" placeholder="密码">
</div>
<label class="col-sm-2"><b>*</b></label>
</div>
<!-- 注册 -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-2">
<button type="button" id="register" class="btn btn-default">注册</button>
</div>
</div>
</form>

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
// 用户名唯一性校验
$('#username').bind('input propertychange', function() {
var username = $("#username").val();
if(username == null || username.length < 1){
$('#display b').text("*");
}else{
//ajax请求
$.post(
"checkUserNameServlet.do",  //url
{ username : $("#username").val(), //data
form : "check"
}
, function(data) {  //请求成功回调该函数
var result = jQuery.parseJSON(data);
$('#display b').text(result.res);
});
}
});

$("#register").click(function(){
var username = $("#username").val();
if(username == null || username.length < 1){
$('#display b').text("用户名不能为空");
}else{
$("form").submit();
}
});

});
</script>
</body>
</html>

**[项目Demo链接]

地址: http://download.csdn.net/download/yanglong_blog_/10109637

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax mvc 项目分层用户名唯一性校验

相关文章推荐

新的分享

章节导航