montao的专栏

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]montao的公告

[编辑]文章分类

存档

一个prototype整合json实现无刷新验证用户名例子收藏

前台采用prototype.js类库实现ajax请求还采用json.js类库实现字符串对象化。

后台运用到自己封装的json扩展和commons的一些jar包。

希望贴出来对大家有所帮助，这个对json封装的jar的源码需要的可以问我拿。

完整的demo地址在CSDN上下载地址:http://download.csdn.net/source/1376292

咱们的运用很简单: 前台代码如下:

<head>
<title>验证用户名是否正确</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/prototype.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/js.js"></script>
<script type="text/javascript">
//提交用户信息,检查用户信息是否正确
function checkName(buttonObj){
buttonObj.disabled = true; //设置按钮变灰不可操作
buttonObj.value = "检查中...";

var name = $('name').value; //获取用户输入的用户名
if(name==""){
alert('用户名不能为空,请填写用户名');
buttonObj.disabled = false; //设置按钮可用
buttonObj.value = "提交";
$('name').focus(); //输入框获取焦点
return;
}
var pars = "name="+name;
//进行ajax请求,(使用的是property)
var myAjax = new Ajax.Request("${pageContext.request.contextPath}/ajaxSimplServlet",{method:"post", parameters:pars, onComplete:function (originalRequest) {
var result = originalRequest.responseText;
var rt = result.parseJSON();
if (rt.success) {
alert(rt.info); //获取服务端响应过来的信息
} else {
alert(rt.info);
}
buttonObj.disabled = false; //设置按钮可用
buttonObj.value = "提交";
}, onException:showException,asynchronous:false});
}
</script>
</head>
<body>
<center>
<input type="text" name="name" size="12"/>
<input type="button" value="提交" onclick="checkName(this)"/>
</center>
</body>

后台代码如下:

//处理用户的请求
    protected void doPost(HttpServletRequest requset, HttpServletResponse response) {
        //自己封装的一个小小的AJAX对象
        AjaxResult result = new AjaxResult();
        try{
            //获取传递过来的用户名
            String name = requset.getParameter("name");
            result.setSuccess(true);//设置请求成功且正常处理信息
            if(name.length()>2)
                result.setInfo("您输入的用户名"+name+"是可用的!");
            else
                result.setInfo("您输入的用户名"+name+"太短,请输入大于两位的用户名!");
        }catch(Exception ex){
            ex.printStackTrace();
            //对异常情况的处理
            result.setFailure(true);    //其实设置了setSuccess(true)的时候failure就为false 反之
            result.setInfo("请求验证用户名的时候发生异常!");
        }
        /* 输出JSON格式的信息*/
        JsonUtil.outJson(result,response);
    }

效果图如下: