ajax实现验证用户名是否已经存在（struts2）

本文主要是介绍ajax实现验证用户名是否已经存在（struts2），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在用户进行注册的时候，为了保证用户名的唯一性，需要在用户注册时进行用户名的验证，这个使用AJAX实现无刷新验证是最合适的。
下面就是我的验证源码，在代码中通过注释讲解用法。
1.jsp页面：

 <table><tr><td>账号</td><td><input name="accountNumber" type="text" id="uname" /><div id="showResult"></div></td></tr>
</table>

2.js代码（Ajax代码）：
这里用的是Jquery的ready方法，在页面完全加载后会调用ready方法，注意ready方法不应该和与<body οnlοad=""> 一起使用。

<script type="text/javascript">$(document).ready(function(){   var inputUserNameObj = $("#uname");   //将获取ID为uname的控件的对象$("#uname").blur(function(){   //当该控件失去焦点时发生var text = inputUserNameObj.val();   //获得用户输入的用户名$.post("member_CheckAccounterNumber.action?accounterNumber="+text,null,function(response){    //以POST方式跳转到action里面的方法中进行处理，并返回处理结果responseif(response=="用户名已经存在"){ //根据返回值进行处理document.getElementById("uname").focus();//用户名输入控件获得焦点document.getElementById("showResult").innerHTML="<font color='red'>"+response+"</font>"; //在div中提示用户该用户名已经存在}else{if(document.getElementById("uname").value=="") //判断用户名是否为空{document.getElementById("showResult").innerHTML="<font color='red'>"+"用户名不为空"+"</font>";//在div中提示用户该用户名不能为空document.getElementById("uname").focus();//用户名输入控件获得焦点}else{document.getElementById("showResult").innerHTML="<font color='blue'>"+response+"</font>"; //在div中提示用户该用户名可用}}});  });   
});
</script><pre name="code" class="plain">

3.action代码：

private String accounterNumber;public String getAccounterNumber() {return accounterNumber;}public void setAccounterNumber(String accounterNumber) {this.accounterNumber = accounterNumber;}<span style="white-space:pre">	</span>//Ajax验证用户名，防止重复public void CheckAccounterNumber(){//查找該用戶名是否存在mUserRole=userbiz.queryMemberUserInfobyAccountName(accounterNumber);//設置响应编码UTF-8，防止中文乱码res.setContentType("text/html;charset=UTF-8");   if(mUserRole!=null)//判断是否存在{try {res.getWriter().write("用户名已经存在");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}else{try {res.getWriter().write("此用户名可用");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}

效果图展示：