使用ajax异步校验数据的两种方法

使用ajax异步校验数据的两种方法

两种方法:

使用js

使用jquery

一使用js

    <script type="text/javascript">    //ajax异步校验    function checkUsername() {        // 获得文件框值:        var username = document.getElementById("username").value;        // 1.创建异步交互对象        var xhr = createXmlHttp();        // 2.设置监听        xhr.onreadystatechange = function() {            if (xhr.readyState == 4) {                if (xhr.status == 200) {                    document.getElementById("span1").innerHTML = xhr.responseText;                }            }        }        // 3.打开连接        xhr.open("GET",                "${pageContext.request.contextPath}/customerAction_findByName.action?time="                        + new Date().getTime() + "&username=" + username, true);        // 4.发送        xhr.send(null);    }    function createXmlHttp() {        var xmlHttp;        try { // Firefox, Opera 8.0+, Safari            xmlHttp = new XMLHttpRequest();        } catch (e) {            try {// Internet Explorer                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");            } catch (e) {                try {                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                } catch (e) {                }            }        }        return xmlHttp;    }    //客户端校验    function checkForm() {        $("#span1").text("");        $("#span2").text("");        $("#span3").text("");        $("#span4").text("");        var username = $("#username").val();        if (username = null || username == "") {            $("#span1").text("用户名不能为空,傻吊");            return false;        } else {        }        var password = $("#password").val();        var rePassword = $("#rePassword").val();        if (password = null || password == "") {            $("#span2").text("密码不能为空哦,傻吊");            return false;        }        var password = $("#password").val();        if (password.length < 6) {            $("#span2").text("密码不能小于6位,傻吊");            return false;        }        var password = $("#password").val();        var rePassword = $("#rePassword").val();        if (password !== rePassword) {            $("#span3").text("密码不一致,傻吊");            return false;        }        var email = $("#email").val();        if (email = null || email == "") {            $("#span4").text("邮箱不能为空哦,傻吊");            return false;        }        var re = /\w+@\w+\.\w+/g;        var email = $("#email").val();        if (!re.test(email)) {            $("#span4").text("邮箱格式不正确,傻吊");            return false;        }    }</script>

二使用jquery

<script>    //ajax异步校验    function checkEmail() {        var email = $("#email").val();        $.get("customerAction_findByEmail.action?email="+email+"&"+ new Date().getTime()  ,function(data,status){            if(status=="success"){                document.getElementById("span4").innerHTML = data;            }        });    }</script>