ajax案例_校验用户名

Posted RichardWLee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax案例_校验用户名相关的知识,希望对你有一定的参考价值。

目录

ajax案例_校验用户名

代码下载

链接:https://pan.baidu.com/s/1pb_sdSmV9Ncs6UIz3q2ztg
提取码:fgx6
复制这段内容后打开百度网盘手机App,操作更方便哦

需求

输入用户名,失去焦点后,通过ajax访问数据库判断用户名是否被占用。

流程

  • 搭建环境:数据库、jsp页面
  • 输入用户名,失去焦点
  • 触发js方法,判断数据库是否已有用户名
  • 在指定的span处加入对应的结果(存在、可用)

搭建环境

  • jsp页面

    其实只要有一个用户名就够了,其他就是为了稍微好看点,并用不到对应的功能。用户名后面的就是一个显示数据或者写数据的地方而已。

    <table border="1px" width="600px">
        <tr>
    
            <td>用户名 :</td>
            <td><input type="text" name="name" id="name"/><span id="span01"></span></td>
        </tr>
        <tr>
            <td>密码 :</td>
            <td><input type="password" name="password" /></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name="email" /></td>
        </tr>
        <tr>
            <td>简介</td>
            <td><input type="text" name="info" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册" /></td>
        </tr>
    </table>
  • sql搭建

    /*创建一个包括用户名和密码的数据库*/
    
    /*创建数据库stus*/
    CREATE DATABASE tuser; 
    /*使用数据库tuser*/
    USE tuser;
    /*创建表t_user*/
    CREATE TABLE t_user(
      id INT PRIMARY KEY AUTO_INCREMENT,
      username VARCHAR(20),
      PASSWORD VARCHAR(20)
    );
    /*插入数据*/
    INSERT INTO t_user VALUES(NULL,‘admin‘,‘10086‘),(NULL,‘kaikai‘,‘8888‘);
    INSERT INTO t_user(username,PASSWORD) VALUES(‘aobama‘,‘123‘),(‘titi‘,‘234‘),(‘aaa‘,‘234234‘);
    /*查看结果*/
    SELECT * FROM t_user;

开发代码

1_jsp

  • jsp修改

    <td><input type="text" name="name" id="name" onblur="checkUserName()"/>
  • 生成XmlHttpRequest的方法(复制来的)

    function createXmlHttpRequest() {
        var xmlHttp;
        try { // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try {// Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttp;
    }
  • ajax代码

    先完成功能,在慢慢补全。

    function checkUserName() {
        //1.创建xmlhtttprequest对象
        var request = createXmlHttpRequest();
        //获取姓名输入框的值
        var name = document.getElementById("name").value;
    
        //2.用POST发送请求,模板复制来的,再修修改改
        //checkUserName是我后面设置的servlet名,这里可以转到对servlet的创建处理了
        request.open("POST", "checkUserName", true);
    
        //设置一个请求头,表明发送一个经过post编码的请求
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send("name="+name);
    
        //3.获取响应数据
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                //获取servlet中写好的响应,目前都没有
                var responseText = request.responseText;
                //测试能不能得到响应
                alert(responseText);
                }
            }
        };
    }

1_servlet

  • servlet三步走

    response.setContentType("text/html;charset=UTF-8");
    //1.获取参数
    String name = request.getParameter("name");
    //2.调用方法
    //这里传给service处理
    CheckUserNameService service = new CheckUserNameServiceImpl();
    boolean isExist = service.checkUserName(name);
    //3.呈现数据,等下再说吧

1_service、dao

  • //service就是调用dao,目前用boolean是OK的
    public boolean checkUserName(String username) throws SQLException {
        UserDao dao = new UserDaoImpl();
        return dao.checkUserName(username);
    public boolean checkUserName(String username) throws SQLException {
        QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
        String sql = "SELECT count(*) FROM t_user WHERE username = ?";
        //这里有一个需要注意的地方
        //当用ScalarHandler时,如果用SELECT *不能查到数据时会报空指针异常
        //因此改成count(*)
        long query = runner.query(sql, new ScalarHandler<>(), username);
        return query > 0;
    }

2_servlet

  • 补全servlet的第三步

    //用println是因为可以直接用int数字。如果是write的话就要传String的“1”
    response.getWriter().println(isExist ? 1 : 2);

2_jsp

  • 把第3步改成需要的样子

    当然可以先用alert测试好再改,我这里就不测试了

    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var responseText = request.responseText;
            if (responseText != 1) {
                document.getElementById("span01").innerHTML = "<font color=‘green‘>可用</font>"
            } else {
                document.getElementById("span01").innerHTML = "<font color=‘red‘>被占用</font>"
            }
        }
    };

测试后,功能实现,完结撒花



以上是关于ajax案例_校验用户名的主要内容,如果未能解决你的问题,请参考以下文章

案例7-用户名异步校验

第15章WEB15-AJAX和JQuery案例篇

AJAX应用股票案例验证码校验

Java44旅游案例:邮箱激活,登录校验

前端12校验用户名,自动提示,CORS

免费下载全套最新013Spring Struts hibernate整合项目视频教程+教学资料+学习课件+源代码+软件开发工具