欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Ajax在表单中的应用

程序员文章站 2022-05-18 08:56:26
ajax在注册用户表单中的使用 1.验证用户名是否被使用 2.获取手机短信验证码 3.点击表单中的图片刷新，可实现刷新图片验证码 ......

 

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>

 

上一篇： jstree

下一篇： jQuery DOM/属性/CSS操作

推荐阅读