Ajax应用案例——检测用户名是否已经被注册

标签: # JavaWeb

需求分析:

在注册页面,输入用户名,当用户名输入框失去焦点时,使用Ajax发送异步请求,将输入框的用户名传递给服务端进行校验(查询数据库是否存在该用户名),客户端接收服务端响应结果,判断后提示相应信息。
在这里插入图片描述

代码示例:

在这里插入图片描述

  • 注册页面(register.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<div>
    <form action="#" method="post">
        <table align="center">
            <tr align="center">
                <td colspan="2"><span>会员注册</span>USER REGISTER</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" id="username" name="username" >
                    <span id="usernameInfo"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" >
                </td>
            </tr>
            <tr align="center">
                <td colspan="2" ><input type="submit" value="注册"/></td>
            </tr>
        </table>
    </form>
</div>

<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/getParameter.js"></script>

<script>
    //jQuery的事件方法:失去焦点后值改变了时执行
    $("#username").change(function () {
        if(this.value===""){
            $("#usernameInfo").html("")
            return;
        }
        //请求的参数:填写的内容
        var params="username="+this.value;
        $.post("UserServlet",params,function (result) {
            // alert(result)
            if(result==="true"){
                $("#usernameInfo").html("用户名已经注册了").css("color", "red");
            }else{
                $("#usernameInfo").html("用户名可用").css("color", "green");
            }
        },"text");
    })
</script>

</body>
</html>
  • 视图层(UserServlet)
@WebServlet(urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        
        UserService userService = new UserService();
        boolean exist = userService.isExist(username);
        response.getWriter().write(String.valueOf(exist));
//        response.getWriter().print(exist);
//        System.out.println(String.valueOf(exist));
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}
  • 业务逻辑层(UserService)
public class UserService {
    private Userdao userdao=new Userdao();
    //判断username是否已经存在。已经存在,返回true,否则返回false
    public boolean isExist(String username){
        User userByUsername = userdao.findUserByUserName(username);
        return userByUsername!=null;
    }
}
  • 数据访问层(Userdao)
public class Userdao {
   public User findUserByUserName(String username) {
       Connection connection = null;
       User user=null;
       try {
           connection = JDBCUtils.getConnection();
           QueryRunner queryRunner = new QueryRunner();
           String selectSql = "select * from t_user where username=?";
           user = queryRunner.query(connection, selectSql, new BeanHandler<User>(User.class), username);
       } catch (SQLException e) {
           e.printStackTrace();
       }finally {
           JDBCUtils.closeResource(connection);
           return user;
       }
   }
}

public class JDBCUtils {
    //使用Druid数据库连接池技术获取数据库连接
    private static DataSource createDataSource;
    static{
        try {
            Properties pros = new Properties();
//            InputStream is = ClassLoader.getSystemClassLoader().getResourceAsStream("druid.properties");
            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
            pros.load(is);
            createDataSource = DruidDataSourceFactory.createDataSource(pros);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    public static Connection getConnection() throws SQLException {
        return createDataSource.getConnection();
    }

    //使用dbutils.jar中提供的DbUtils工具类,实现资源的关闭
    public static void closeResource(Connection conn, Statement ps, ResultSet rs){
        DbUtils.closeQuietly(conn);
        DbUtils.closeQuietly(ps);
        DbUtils.closeQuietly(rs);
    }

    public static void closeResource(Connection conn){
        DbUtils.closeQuietly(conn);
    }
    public static void closeResource(Connection conn,ResultSet rs){
        DbUtils.closeQuietly(conn);
        DbUtils.closeQuietly(rs);
    }
}
  • Druid数据库连接池配置文件(druid.properties)
url=jdbc:mysql:///stusmanager
username=root
password=root
driverClassName=com.mysql.jdbc.Driver
initialSize=10
maxActive=10
  • 实体类(User)
public class User {
    private int id;
    private String username;
    private String password;
    public User() {
    }
    public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

@WebFilter(urlPatterns = "/*")
public class EncodingFilter implements Filter {
    @Override
    public void destroy() {
    }
    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;

        //统一解决乱码问题
        //1.解决响应的中文乱码
        response.setContentType("text/html;charset=utf-8");
        //2.解决请求的中文乱码:post方式
        if ("POST".equalsIgnoreCase(request.getMethod())) {
            request.setCharacterEncoding("utf-8");
        }
        //3.放行请求
        chain.doFilter(request, response);
    }
    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}

数据库中以注册的用户名:

在这里插入图片描述


注册测试:

访问http://localhost:8080/test/register.html测试:
在这里插入图片描述

版权声明:本文为qq_45615417原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45615417/article/details/104672194

智能推荐

RIP/DHCP/ACL综合实验

组播: 加入组的组成员才会接受到消息,只需要将流量发送一次到组播地址 减少控制面流量,减少头部复制, RIP1  广播   有类  不支持认证 RIP2  组播   无类  (支持VLAN)、支持认证 所有距离矢量路由协议:具有距离矢量特征的协议,都会在边界自动汇总 控制平面  路由的产生是控制平面的流量 数据平面  ...

【Sublime】使用 Sublime 工具时运行python文件

使用 Sublime 工具时报Decode error - output not utf-8解决办法   在菜单中tools中第四项编译系统 内最后一项增添新的编译系统 自动新建 Python.sublime-build文件,并添加"encoding":"cp936"这一行,保存即可 使用python2 则注释encoding改为utf-8 ctr...

java乐观锁和悲观锁最底层的实现

1. CAS实现的乐观锁 CAS(Compare And Swap 比较并且替换)是乐观锁的一种实现方式,是一种轻量级锁,JUC 中很多工具类的实现就是基于 CAS 的,也可以理解为自旋锁 JUC是指import java.util.concurrent下面的包, 比如:import java.util.concurrent.atomic.AtomicInteger; 最终实现是汇编指令:lock...

Python 中各种imread函数的区别与联系

  原博客:https://blog.csdn.net/renelian1572/article/details/78761278 最近一直在用python做图像处理相关的东西,被各种imread函数搞得很头疼,因此今天决定将这些imread总结一下,以免以后因此犯些愚蠢的错误。如果你正好也对此感到困惑可以看下这篇总结。当然,要了解具体的细节,还是应该 read the fuc...

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

猜你喜欢

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...