目录

ajax案例_校验用户名 代码下载需求流程搭建环境开发代码 1_jsp1_servlet1_service、dao2_servlet2_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>" } } };

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

---

//这里是用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>") } }); }

转载于:https://www.cnblogs.com/richardwlee/p/10326323.html