【java web】--Ajax异步判断用户名是否存在

来源：互联网发布：增加一列的sql语句编辑：程序博客网时间：2024/05/17 03:07

　　判断用户名是否存在，在很多项目中很常用。为了更好的用户体验度，把弹出框的形式升级成了Ajax的形式，这样的好处是，异步触发，无需等待，异步刷新，节省服务器资源消耗。

　　思路大概如下：

　　１．首先我们要有一个地方，盛放Ajax的判断结果，在前台Jsp页面写一个span标签，id为showResult，用户名是否存在的页面样式会显示到span标签里面。

<div class="zydj01 ma15"><span class="zyt">采摘领导：</span><span class="zyz"><input type="text" onBlur="checkIsExist();" name="custrealname" id="custrealname"  value="请输入领导用户名/手机号" onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999999" ></span> <span id="showResult"></span></div>

　　２．其次，我们输入用户名后，离开输入框，需要通过onblur事件（对象失去焦点后发生）触发判断用户名是否存在的JS事件。触发的事件是checkIsExist();

//判断用户名是否可用的js  王美  2016年1月12日09:49:31    function checkIsExist() {             var realname = $.trim($("#custrealname").val());          $.ajax({              type:"POST",   //http请求方式              url:"${path}/app/isExist.json",//发送给服务器的url              data:"realname="+realname, //发送给服务器的参数              dataType:"json",  //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的controller返回的数据格式一致,不然不会调用回调函数complete)              complete : function(msg) {                var result = eval("(" + msg.responseText + ")");               if(result.success) {                                    $("#showResult").hide();                  } else {                    $("#showResult").show().html(result.message);                   }              }           });      }

３．Ajax发送异步请求到Ajax的引擎，发送后继续响应用户界面，从服务器得到数据后，调用callback()函数，响应数据请求。

需要了解Ajax原理的可以参考我之前的博客Ajax拾遗--【DRP】

// 查询账户是否存在  王美  2016年1月12日15:21:00@ResponseBody@RequestMapping(value = "/isExist.json", method = { RequestMethod.POST,RequestMethod.GET })public AppResultDTO isExist(String realname) {AppResultDTO result = new AppResultDTO();                          boolean success = this.isExistUserName(realname);                result.setSuccess(success);                if(success) {          result.setMessage("<font color='green'>用户名存在，可用</font>");      } else {          result.setMessage("<font color='red'>用户不存在</font>");      }      return result;  }

//2.判断用户名是否存在--王美--2016年1月11日09:04:49@ResponseBody  @RequestMapping(value = "/isExistUserName.json",method={RequestMethod.POST,RequestMethod.GET})   public boolean isExistUserName(String realname) {int count = appPickRecordService.findByUserName(realname);if (count > 0) {return true;}return false;}

很基础的知识，希望对大家有帮助！

1 0