异步请求实现用户名校验是否存在

一直坚持不写博客,今天终于不坚持了,感觉知识点遗忘的太严重了,每次上过的知识没过几天就都忘了。今天写一篇关于利用ajax技术实现用户登录校验的功能。其实就是判断该用户是否已经存在了,判断能否再注册而已。
方法写了两种,一种是基础部分,老师叫我们每个人都要了解,另一种也就是高级部分,以后可能会用到的。

核心代码如下:

//基础篇
//采用异步请求的方式做用户名校验,很大程度上减轻数据库压力,提高运行效率。这里给填写用户名之后赋予了一个失去焦点就做判断的方法。
function checkusername(){
    //做异步请求处理
    //1、要创建异步请求对象:XMLHttpRequest
    var xmlRep=new XMlHttpRequest();
    //2、设置请求数据(分为get和post两种方式)
    xmlRep.open()
    function checkUsername(obj){//要异步请求处理
        //1.要创建异步请求对象;XmlHttpRequest
        var xmlReq=new XMLHttpRequest();
        //2,设置请求数据
        xmlReq.open("GET","ajaxControll.jsp?username="+obj.value,true);
        var param=null  //get方式没有参数
        xmlReq.open("POST","ajaxControll.jsp",true);
        xmlReq.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        param="username="+obj.value;//post 方式传递数据           
        //3.设置异步响应数据处理
            xmlReq.onreadystatechange=function(){
            //xmlReq.readyState :0(创建异步请求对象),1(异步请求初始化),2(发送异步请求准备),3(发送异步处理),4(响应完成)                           
            if(xmlReq.readyState==4){//是否返程响应
                if(xmlReq.status==200){//响应是否成功
                    //  var test=xmlReq.responseText;//接受响应的文本数据
                    var json=$.parseJSON(xmlReq.responseText.trim());//接收响应的文本数据                               
                    if(json.isCheck){//isCheck是我在其他类用来接收sql语句返回值的一个'变量'。
                        $("#usernameInfo").html("<img src='image/fail.png'/>用户名已经存在,请重新选择一个!!!");
                    }           
                }                                                       
            }
        }
        //4.发送请求
        xmlReq.send(param);         
}

显然基础版本的很繁琐,所以我们学习基础的是要掌握它的原理。下面将介绍用jquery方式来实现异步验证,记住要导入jquery的工具包

function checkUsername(obj) {
    //要异步请求处理
    //使用jQuery框架
    //第一个参数:异步请求地址
    //第二个参数:异步请求的请求参数
    //第三个参数:异步请求响应数据处理的回调处理,data参数就是响应的数据
    //第四个参数:异步请求响应数据的类型

    $.post("page/ajaxControll.jsp", "username=" + obj.value, function(data) {
    if (data.isCheck) {
        $("#usernameInfo").html("<img src='image/fail.png'>用户名已经被占用,请重名选择一个!!!");
        $("#usernameInfo").css("color", "red");
    } else {
        $("#usernameInfo").html("<img src='image/right.png'>用户可以使用...");
        $("#usernameInfo").css("color", "green");
        }
   }, "json");
}

另一个类的控制代码:

public boolean usernameExists(String name) throws Exception {
    String sql = String.format("select 1 from users where username='%s'",
name);
        return DbHelper.findSingleObject(sql) != null;
        }

        request.setCharacterEncoding("utf-8");
        String name=request.getParameter("username");
        //json:对象或map 使用{},集合或数组使用【】
        //属性名,方法,字符串类型的属性值,使用双引号引起
        out.println("{\"isCheck\":"+usernameExists(name)+"}");
        out.flush();
阅读更多
版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/love___code/article/details/52331968
个人分类: 微妙的异步
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭