当前位置: 代码迷 >> Java Web开发 >> 贡献一个prototype整合json实现无刷新验证用户名例子解决办法
  详细解决方案

贡献一个prototype整合json实现无刷新验证用户名例子解决办法

热度:72   发布时间:2016-04-17 11:04:56.0
贡献一个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!
  相关解决方案