这篇文章主要介绍了Ajax验证用户名是否存在的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

jsp页面

<head>
<script type="text/javascript" src="js/register.js"></script>
</head>
<table>
<td>用户名:</td>
 <td> <input type="text" name="r_name" id="r_name" onblur="CheckUserName()">
 <span id="span01"></span>
 </td>
</table>

js文件夹下的register.js

//创建对象
function ajaxFunction(){
 var xmlHttp;
 try{
 // 适用于IE7+, Firefox, Chrome, Opera, Safari
 xmlHttp=new XMLHttpRequest();
 }
 catch(e){
 try{
 //Internet Explorer
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e){
 try{
 // 适用于IE6, IE5
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch(e){
 xmlHttp=false;
 }
 }
 }
 return xmlHttp;
 }

var flag=ture;
 function CheckUserName(){
 //获取jsp页面输入的值
var name=document.getElementById("r_name").value;
 if(name==""||name==null){
 document.getElementById("span01").innerHTML="<font color='red'>用户名不能为空!</font>"
 flag=false;
 }else{
 //1.创建对象
var request=ajaxFunction();
 //2.发送请求
request.open("POST","/StudyWeb/CheckUserNameServlet",true);//true表示异步提交
//注册状态改变监听,获取服务器传送过来的数据
request.onreadystatechange=function(){
 //readyState==4表示请求已经完成,且响应已就绪。status==200表示“OK”
if(request.readyState==4 && request.status==200){
var data=request.responseText;//获取CheckUserNameServlet中response中存储的值
if(data == 1){
 document.getElementById("span01").innerHTML="<font color='red'>用户名已存在!</font>"
 flag=false;
 }else{
 document.getElementById("span01").innerHTML="<font color='green'>√</font>"
 flag=true;
 }
 }
 }
 //如果是post方式带数据,那么这里要添加头,说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
 //带数据过去,在send方法里填写表单数据
request.send("name="+name);
 }
 return flag;
 }

后台StudyWeb项目下的CheckUserNameServlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取ajax发送过来的name值
String r_name=request.getParameter("name");
 try {
 //检验是否存在该用户名
boolean isExist=userService.CheckUserName(r_name);
 System.out.println("isExist"+isExist);
 //通知页面,到底有没有
if(isExist){
 response.getWriter().println(1);//存在用户名
}else{
 response.getWriter().println(2);//不存在该用户
}
 } catch (Exception e) {
 e.printStackTrace();
 }
 }

UserDaoImpl中方法的实现

public boolean CheckUserName(String u_name) {
 boolean flag=false;
 String sql="select u_id,u_name,u_password,u_email,u_phone from user where u_name=?";
 conn=super.getConnection();
 try {
 pstmt=conn.prepareStatement(sql);
 pstmt.setString(1,u_name);
 rs=pstmt.executeQuery();
//如果存在我输入的用户名和数据库表中已有的用户名相同时
if(rs.next()){
flag=true;
 }
 } catch (SQLException e) {
 e.printStackTrace();
 }finally{
 super.closeAll(conn, pstmt, stmt, rs);
 }
 return flag;
 }

总结

以上所述是小编给大家介绍的Ajax验证用户名是否存在的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言小编会及时回复大家的!

最新资讯
蔚来汽车:首任ES6/ES8车主可享受终生免费换电服务

蔚来汽车:首任ES6/ES8

满足条件的蔚来车主,自驾前往任意营运中的换电站,均可享
超50万行代码 腾讯重磅发布全栈机器学习平台Angel 3.0

超50万行代码 腾讯重

一个全栈的机器学习平台,近日悄悄上线了。8月22日,腾讯
首届清华智班30人名单公布:专为AI培养 状元金牌云集

首届清华智班30人名单

今年5月,清华宣布成立”人工智能学堂班“,与姚班地位平
索尼和迪士尼“分手”了 但“蜘蛛侠宇宙”才刚开启

索尼和迪士尼“分手”

索尼、漫威和迪士尼的三方博弈尘埃落定,漫威将不再参与
"窃听风云""通天大盗" 黑客视角了解网络安全风险

"窃听风云""通天大

据统计,目前全国各预警平台平均每天产生的信息网络诈骗
黑洞也是由分子组成的?

黑洞也是由分子组成的

作为宇宙中最神秘的天体,黑洞一般被认为是一种扭曲的时
最新文章
关于Ajax跨域问题及解决方案详析

关于Ajax跨域问题及解

这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的
Ajax请求跨域问题解决方案分析

Ajax请求跨域问题解决

这篇文章主要介绍了Ajax请求跨域问题解决方案,结合具
SpringMVC+Jquery实现Ajax功能

SpringMVC+Jquery实现

SpringMVC:是基于Spring的一个子框架(MVC框架),功能强于
Ajax跨域问题及解决方案(jsonp,cors)

Ajax跨域问题及解决方

远程服务器上设法动态的把数据装进js格式的文本代码段
使用Ajax模仿百度搜索框的自动提示功能实例

使用Ajax模仿百度搜索

今天小编就为大家分享一篇使用Ajax模仿百度搜索框的自
解决ajax异步请求返回的是字符串问题

解决ajax异步请求返回

这篇文章主要介绍了解决ajax异步请求返回的是字符串问