目录
- ajax案例_校验用户名
- 代码下载
- 需求
- 流程
- 搭建环境
- 开发代码
- 1_jsp
- 1_servlet
- 1_service、dao
- 2_servlet
- 2_jsp
- 测试后，功能实现，完结撒花
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案例_校验用户名
原文地址：https://www.cnblogs.com/richardwlee/p/10326323.html