shikailun的日志

Struts2 jQuery 实现无刷新验证

在注册时我们需要验证用户所输信息的正确性，如果待用户提交表单一次性验证，体验不是很好

所有我们可以利用jQuery实时验证，很多网站都有这个功能，这里我们也简单的来实现一下。

以验证用户名为例，可以这样实现：当用户名的输入框失去焦点时，利用jQuery的post方法通过HTTP POST 将用户名以JSON格式传向服务端，服务端接收数据判断后以JSON格式传给jQuery的回调函数即可，很简单的。

首先在注册页面申明username失去焦点调用的函数：

HTML代码

<input name="username" id="username"  onblur="checkUername()" />

JS代码

function checkUername(){ 
    document.getElementById("loading").style.display= "block"; 
    var url = "checkUsernameAction"; 
    var username = $.trim($("#username").val());  
    var json_username = { 
        username : username 
    }; //JSON object 
    if (username == "") 
    { 
        document.getElementById("loading").style.display= "none"; 
        document.getElementById("username_notice").style.display= "block"; 
        document.getElementById("username_notice").innerHTML="请输入用户名"; 
    }else{ 
        $.post( url ,json_username , callback , "json" ); 
        function callback(json){ 
            //解析json 
            var json_object =eval("("+json+")"); 
            var suc = json_object.suc; 
            var msg = json_object.msg; 
            document.getElementById("loading").style.display= "none"; 
            if(suc==0 ){ 
                document.getElementById("username_notice").style.display= "block"; 
                document.getElementById("username_notice").innerHTML=msg; 
            } 
            if(suc== 1){ 
                document.getElementById("username_notice").style.display= "block"; 
                document.getElementById("username_notice").innerHTML=msg; 
            } 
        } 
    } 
}

上面代码，我简单处理了一下页面效果：post前，将一个loading的转啊转转啊的图片显示，待服务端返回数据后再隐藏，并将服务端的消息显示处理。

服务端需要引入和JSON有关的jar包。

action的代码如下

public String checkUsername(){ 
    if (userService.findUsername(username)) { 
        result = "{suc:1, msg:'已经存在！'}"; 
        return SUCCESS; 
    } else { 
        result = "{suc:0, msg:'可以注册...'}"; 
        return SUCCESS; 
    } 
}

Action代码没什么可看，别忘记getter和setter就可以了，userService由Spring注入，用来实现逻辑判断，还要注意这个result字段，这里就不上代码了。

配置struts.xml

在配置struts.xml时，package需要继承json-defaul，而不是平常的struts-default，如下：

<package name="user-common-json" extends="json-default"> 
    <action name="checkUsernameAction" class="registAction"  method="checkUsername"> 
        <result type="json"> 
            <param name="root">result</param> 
        </result> 
    </action> 
</package>

到此，一个简单的Struts和jQuery无刷新验证用户例子就完成了，效果如下：

yilee于阳光缘林
5:00 12/04