目录
-
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
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
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>"
}
}
};
测试后,功能实现,完结撒花
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|