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

最新推荐文章于 2022-12-15 22:37:53 发布

longger_yang

最新推荐文章于 2022-12-15 22:37:53 发布

阅读量1.1w

点赞数 5

分类专栏： JavaWeb 文章标签： ajax mvc 项目分层用户名唯一性校验

本文链接：https://blog.csdn.net/yanglong_blog_/article/details/78480192

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本项目的后台没有采用框架，但采用了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 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

longger_yang

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
2
评论
Ajax异步请求-校验用户名的唯一性

本项目的后台没有采用框架，但采用了MVC的分层结构，使项目结构清晰化，便于维护。包说明: 　　1）dao层: dao层是数据访问层，该层中定义了项目的功能模块接口，给出了项目的设计规范。总的来说，该层中只考虑项目所需的功能，而不去考虑项目需要实现的细节，属于总体设计。　　2）daoimpl层: 该层是dao的实现层, 该层中的类均实现各自对应的dao接口，daoimpl层是dao层
复制链接

扫一扫