用户管理的设计--4.jquery的ajax实现登录名的校验

页面效果

　　鼠标失去焦点时，不需要刷新页面进行校验，判断登录名是否重复。

---

实现步骤

1.引入struts2-json-plugin-2.5.10.1插件包

2.页面使用jquery的ajax实现后台校验js

/**校验登录名是否出现重复*/
    function checkUser(o){
        //alert(o.value);//dom的写法
        //alert($(o).val());//jquery的写法
        var logonName = $(o).val();
        //以登录名作为查询条件，查询该登录名是否在数据库表中存在记录
        $.post("elecUserAction_checkUser.do",{"logonName":logonName},function(data){
            //如果栈顶是模型驱动的对象，取值的时候应该使用data.message的方式
            //如果栈顶是模型驱动的对象的某个属性，取值的时候应该使用data即可
            if(data==1){
                $("#check").html("<font color='red'>登录名不能为空</font>");
                $(o)[0].focus();
                $("#BT_Submit").attr("disabled","none");
            }
            else if(data==2){
                $("#check").html("<font color='red'>登录名已经存在</font>");
                $(o)[0].focus();
                $("#BT_Submit").attr("disabled","none");
            }
            else{
                $("#check").html("<font color='green'>登录名可以使用</font>");
                $("#BT_Submit").attr("disabled","");
            }
        });
    }

可以看到data作为标识符来判断登录名是否重复，所以在实体类ElecUser.java中加入非持久化javabean属性

//检查登录名是否重复标识符
private String message;
public String getMessage() {
   return message;
}
public void setMessage(String message) {
   this.message = message;
}

3.在Action类的代码中定义checkUser()：将String类型的message放置到栈顶

/**  
    * @Name: checkUser
    * @Description: 使用jquery的ajax完成登录名的后台校验，判断是否数据库中存在，保证登录名惟一
    * @Parameters: 无
    * @Return: 使用struts2的json插件包
    */
    public String checkUser(){
        //1:获取登录名
        String logonName = elecUser.getLogonName();
        //2:判断登录名是否出现重复
        String message = elecUserService.checkUser(logonName);
        //放置到栈顶
        elecUser.setMessage(message);//栈顶对象是ElecUser对象
        //ValueUtils.putValueStack(message);//栈顶对象是String类型的属性
        return "checkUser";
    }

这里面调用了service类的checkUser(logonName)方法，得到标识符的值，然后放入栈顶

4.在Service类的代码中查询message标识的值

/**  
    * @Name: checkUser
    * @Description: 判断登录名是否存在
    * @Parameters: logonName 登录名
    * @Return: String：判断登录名是否出现重复，返回一个标识message属性
                * message=1 表示登录名为空，不可以保存
                * message=2 表示登录名存在，不可以保存
                * message=3 表示登录名不存在，可以保存
    */
    @Override
    public String checkUser(String logonName) {
        String message="";
        if(StringUtils.isNotBlank(logonName)){
            //以登录名作为查询条件，查询数据库
            String condition=" and o.logonName = ?";
            Object[] params={logonName};
            List<ElecUser> list = elecUserDao.findCollectionByConditionNoPage(condition, params, null);
            //表示登录名存在，不可以保存
            if(list!=null&&list.size()>0){
                message="2";
            }
            //表示登录名不存在，可以保存
            else{
                message="3";
            }
        }
        //登录名为空
        else{
            message="1";
        }
        return message;
    }

5.在struts.xml中添加

<result name="checkUser" type="json">
 　　<!-- root指定message表示查找栈顶是否有message属性，如果有，直接通过message的get方法，获取值放入栈顶 -->
     <param name="root">message</param>
     <!--对象的某个属性被json化-->
     <param name="includeProperties">message</param>
</result>

这里参数名root表示的是如果标识符message是放入elecUser对象中，栈顶是ElecUser对象时，直接通过message的get方法获得message属性值放入栈顶，页面Js中就不需要使用data.message来取值。具体可以看struts插件包源代码：

protected Object findRootObject(ActionInvocation invocation) {
        Object rootObject;
//查找栈顶是否有message属性
        if (this.root != null) {
//如果对象有message属性，直接通过message的get方法，获取值放入栈顶
            ValueStack stack = invocation.getStack();
            rootObject = stack.findValue(root);
        } else {
            rootObject = invocation.getStack().peek(); // model overrides action
        }
        return rootObject;
    }

    protected String createJSONString(HttpServletRequest request, Object rootObject) throws JSONException {
        String json = JSONUtil.serialize(rootObject, excludeProperties, includeProperties, ignoreHierarchy,
                                         enumAsBean, excludeNullProperties, defaultDateFormat);
        json = addCallbackIfApplicable(request, json);
        return json;
    }