Ajax在表单中的应用

2018-06-24 02:04:37来源：未知阅读 ()

ajax在注册用户表单中的使用

1.验证用户名是否被使用

2.获取手机短信验证码

3.点击表单中的图片刷新，可实现刷新图片验证码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax在注册用户表单中的使用</title>
</head>
<body>
    <p>1.验证用户名是否被使用</p>
    <p>2.获取手机短信验证码</p>
    <p>3.点击表单中的图片刷新，可实现刷新图片验证码</p>
    <script>
    //1.给用户名表单元素后添加事件函数checkname()
        function Ajax(type,url,data,success,failed){
            //创建Ajax对象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }
            var type =type.topperCase();
            //用于清除缓存
            var random=Math.random();
            if(typeof data=="object"){
                var str="";
                for(var key in data){
                   str +=key+'='+data[key] +'&';
                }
                data=str.replace(/&$/,'');
            }
            if (type=="GET"){
                if(data){
                    xhr.open('GET',url+'?'+data,true);
                }else{
                    xhr.open('GET',url+'?t='+random,true);
                }
                xhr.send();
            }else if(type=="POSt"){
                xhr.open('POST',url,true);
                xhr.setRequestHeader ("Content-type","app...");//设置请求头信息
                xhr.send(data);
            }
            //处理返回数据
            xhr.onreadystatechange =function(){
                if(xhr.readystatechange ==4){
                    if(xhr.status==200){
                        success(xhr.responseText );
                    }else{
                        if(failed){
                            failed(xhr.status);
                        }
                    }
                }
            }
        }
        function loading(){//请求慢时显示加载中函数
            tipObj=document.getElementsById("tips");
            tipObj.style.display="block";
            tipObj.innerHTML ="加载中...";
        }
        function removeLoading(){//移除加载中函数效果
            tipObj=document.getElementsById("tips");
            tipObj.innerHTML ="";
            tipObj.style.display="none";
        }
        function checkName(){
            var name =document.getElementsById("username").value;
            if(isNull(name)){//输入为空时，离开该输入框，则提示
                showTips("请输入用户名");
            }
            loading();//当输入不为空时，防止服务器响应慢时调用loading函数
            var sendData={username:name,action:'checkname'};
            Ajax('get','check.php',sendData ,function(data) {//发送Ajax请求，此处Ajax为之前写好的名为Ajax的函数，其中有创建xmlHTTP对象到完整请求的过程
                removeLoading();//当Ajax请求发送成功时，移除加载中效果
                var user = eval('(' + data + ')');
                if (user.id) {
                    showTips("用户名已被占用，请重新输入用户名");
                }
                },function(data){
                showTips("Ajax请求错误");
            });
        }
    //2.给手机号短信验证码表单元素添加函数checkMobile
        function checkMobile(s){//查询验证手机号码是否合法
            var obj=document.getElementsById("usermobile");
            var regu=/^[1][3|4|5|8][0-9]{9}$/gi;
            var re=new RegExp(regu);
            if(!re.test(obj.value)){//若手机号有误，则点击获取短信验证码的按钮继续隐藏
                showTips("手机号有误，请重新输入");
                var obj=document.getElementById("mobileben");
                obj.style.display="none";
                obj.disabled=true;
                return false;//反之显示按钮
            }
            var obj=document.getElementById("mobileben");
            obj.style.display="block";
            obj.disabled=false;
        }
        function getMobileCode() {
            var obj = document.getElementsById("usermobile");
            var regu = /^[1][3|4|5|8][0-9]{9}$/gi;
            var re = new RegExp(regu);
            if (!re.test(obj.value)) {
                showTips("手机号有误，请重新输入");
                return false;
            }
            sendData = {mobile: obj.value, action: "getcode"};
            Ajax("get", "check.php", sendData, function (data) {
                tipObj = document.getElementById("tips");
                tipObj.style.display = "block";
                tipObj.innerHTML = "手机验证码是：" + data;
            }, function (data) {
                showTips("手机验证码获取错误");
            });
        }
    //3.点击刷新图片验证码添加函数changeCode
        function changeCode(){
            var url=document.getElementById("code").src;
            var rand=Math.floor(Math.random()*(1000+1));
            url+='?'+rand;//给获取的src属性后加一个生成的随机数生成新的验证码图片
            document.getElementById("code").src=url;//把新生成的验证码图片赋值回去url
        }
    </script>
</body>
</html>