Ajax----校验用户名是否可用

校验用户名是否可用

1.搭建环境

1.页面准备

	<body>
   	<table border="1" width="500">
   		<tr>
   			<td>用户名:</td>
   			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
   		</tr>
   		<tr>
   			<td>密码</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>邮箱</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td>简介</td>
   			<td><input type="text" name=""></td>
   		</tr>
   		<tr>
   			<td colspan="2"><input type="submit" value="注册"></td>
   		</tr>
   	</table>
   </body>

2、数据库准备

2.Servlet代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	try {
			
		request.setCharacterEncoding("UTF-8");
			
		//1. 检测是否存在
		String name = request.getParameter("name");
		System.out.println("name="+name);
			
		UserDao dao = new UserDaomImpl();
		boolean isExist = dao.checkUserName(name);
			
		//2.  通知页面,到底有还是没有。
		if(isExist){
			response.getWriter().println(1);  //存在用户名
		}else{
			response.getWriter().println(2); //不存在该用户名
		}
			
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

3. Dao代码

select * from page 查询page里所有的信息,包括字段名,数据
select count (*) from page 查询表page的行数

	public class UserDaomImpl implements UserDao{

		@Override
		public boolean checkUserName(String username) throws SQLException {
			QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
			
			//select * from page 查询page里所有的信息,包括字段名,数据
			//select count (*) from page 查询表page的行数
			String sql = "select count(*) from t_user where username =?";
			

			runner.query(sql, new  ScalarHandler(), username);

			Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
			return result > 0 ;
		}	
	}
}

4.jsp页面显示

	function checkUserName() {

		//获取输入框的值 document 整个网页
		var name = document.getElementById("name").value; // value  value() val val()
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("POST"  ,"/day16/CheckUserNameServlet" , true );
		
		//注册状态改变监听,获取服务器传送过来的数据
		request.onreadystatechange = function(){
			
			if(request.readyState == 4 && request.status == 200){
				//alert(request.responseText);
				var data = request.responseText;
				if(data == 1){
					//alert("用户名已存在");
					document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
				}else{
					document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
					//alert("用户名未存在");
				}
			}
			
		}
		
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		request.send("name="+name);
	}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值