日期:2014-05-17  浏览次数:20645 次

贡献一个prototype整合json实现无刷新验证用户名例子
前台采用prototype.js类库实现ajax请求 还采用json.js类库实现字符串对象化。

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

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

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

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

<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>



后台代码如下:
Java code

//处理用户的请求
    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);
    }



------解决方案--------------------
收藏
谢谢lz!