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

本项目的后台没有采用框架,但采用了MVC的分层结构,使项目结构清晰化,便于维护。
Ajax异步请求-校验用户名的唯一性_第1张图片
包说明:
  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环境)


运行截图:
Ajax异步请求-校验用户名的唯一性_第2张图片
Ajax异步请求-校验用户名的唯一性_第3张图片
Ajax异步请求-校验用户名的唯一性_第4张图片


项目结构图:
后台:
Ajax异步请求-校验用户名的唯一性_第5张图片


前台:
Ajax异步请求-校验用户名的唯一性_第6张图片


完整项目结构图:
Ajax异步请求-校验用户名的唯一性_第7张图片


核心代码:
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 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"%>

<html>
<head>
<meta charset="UTF-8">

<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

你可能感兴趣的:(JavaWeb)