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

来源：互联网发布：akg k309 知乎编辑：程序博客网时间：2024/06/07 06:15

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

阅读全文

1 0