ajax案例_校验用户名

ajax案例_校验用户名

目录

• ajax案例_校验用户名
  • 代码下载
  • 需求
  • 流程
  • 搭建环境
  • 开发代码
    • 1_jsp
    • 1_servlet
    • 1_service、dao
    • 2_servlet
    • 2_jsp
  • 测试后，功能实现，完结撒花

代码下载

链接：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>"
          }
      }
  };
  

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

---

//这里是用jQuery的post方法改写的,流程和上面差不多
function checkUserName() {
    //1.得到数据
    var name = $("#name").val();
    //2.发送请求
    $.post("checkUserName", {name : name}, function (data) {
    //3.输出要页面上
        if (data != 1) {
            //可用
            $("#span01").html("<font color='green'>可用</font>")
        } else {
            //不可用
            $("#span01").html("<font color='red'>被占用</font>")
        }
    });
}