怎么写注册页面用户是否存在Ajax

注册页面校验多而繁杂，不能为空、格式正确、确认密码与密码相一致、用户名是否已被注册。

初学者使用原生代码比较多，现在就用户是否已被注册进行简单介绍。

思路：用户名的是否注册校验用的是异步提交的方式，异步提交简单来说就是在不刷新页面的前提下与后台进行通信。而Ajax用的正式异步的方式。jsp——servlet——service——dao——数据库，这是主线。

jsp写的是Ajax校验，代码如下:

/* 检测用户是否存在 */
    function checkName(nameInput) {
        //获取到用户输入的cname
        var cname = nameInput.value;
        var result = "";
        if (cname != "") {
            //将cname传到后台查询
            //获取ajax对象
            var xhr = getXhr();
            console.log(xhr);
            //ajax事件监听和回调函数
            xhr.onreadystatechange = function(){
                //如果响应成功并且状态码为200
                if(xhr.readyState == 4 && xhr.status == 200){
                    //将返回的结果赋值给result
                    result = xhr.responseText;
                    console.log("function回调函数中:"+result);
                }
            }
            //请求的设置
            xhr.open("GET","${pageContext.request.contextPath}/customerInfo?method=selectCustomerByName&cname="+cname,false);
            xhr.send(null);
            var nameMsg = document.getElementById("nameMsg");
            if(result == "1"){
                nameMsg.innerHTML = "<font style='color:red;'>用户名已存在</font>";
                return false;
            }else{
                nameMsg.innerHTML = "<font style='color:green;'>可以注册</font>";
                return true;
            }
        }

        //提示用户输入不能为空
    }

    function getXhr() {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }

这里面Ajax向servlet发送数据，同时也接受数据。  xhr.open("GET","${pageContext.request.contextPath}/customerInfo?method=selectCustomerByName&cname="+cname,false);这句话就是发送，false代表异步的方式，千万不能更改。  result = xhr.responseText;这句话是接受servlet返回的值或者内容。

 

servlet：

private void selectCustomerByName(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 这里可以格式化编码格式
        String cname = request.getParameter("cname");
        String reasult = new CustomerServiceImpl().selectCustomerByName(cname);
        if (reasult == null) {
            System.out.println("跳转到错误页面");
        }
        response.getWriter().print(reasult);
    }

 

前台Ajax中result中存放的值是什么取决于servlet返回的是什么，servlet中 response.getWriter().print(reasult);这句话就是返回给前台的值或内容。接下来再把基本的service和dao补全完整就可以了。