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>

Ajax在表单中的应用的更多相关文章

  1. 今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  2. jquery实现ajax提交表单信息

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; ...

  3. 【ajax 提交表单】多种方式的注意事项

    在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...

  4. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  5. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  6. 表单中<form>的enctype属性

    application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...

  7. VIEW层AJAX提交表单到Controller的实体

    在MVC环境中,AJAX方式添加一个对象,这个对象在Models中是一个视图模型,在前台显示时是这样的代码: <%using (Html.BeginForm())      { %>    ...

  8. 一个ajax实现表单上传文件的神器 formdata

    通过传统的form表单提交的方式上传文件: $.ajax({ url : "http://localhost:8080/STS/rest/user", type : "P ...

  9. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

随机推荐

  1. 云端基于Docker的微服务与持续交付实践

    云端基于Docker的微服务与持续交付实践笔记,是基于易立老师在阿里巴巴首届在线技术峰会上<云端基于Docker的微服务与持续交付实践>总结而出的. 本次主要讲了什么? Docker Sw ...

  2. 保存及读取keras模型参数

    转自:http://blog.csdn.net/u010159842/article/details/54407745,感谢分享~ 你可以使用model.save(filepath)将Keras模型和 ...

  3. matlab 中“newff” 函数的参数设置

    matlab 中"newff" 函数的使用方法技巧|和各参数的意义 先来一个简单的源程序让大家练习一下: % Here input P and targets T define a ...

  4. nagios centos7 rpm打包

    wget https://github.com/NagiosEnterprises/nagioscore/releases/download/nagios-4.3.1/nagios-4.3.1.tar ...

  5. BeginInvoke和EndInvoke方法

    本系列教程主要包括如下内容:1. BeginInvoke和EndInvoke方法 2. Thread类 3. 线程池 4. 线程同步基础 5. 死锁 6. 线程同步的7种方法 7. 如何在线程中访问G ...

  6. VSCode-python 进阶配置

    VSCode-python 进阶配置 中文乱码 中文乱码,网上一堆解决方法,但是根本没有有效起作用的. 在python脚本的前面添加: # -*- coding:utf-8 -*- 并不能在控制台输出 ...

  7. escape，unescape与encodeURIComponent，decodeURIComponent

    escape:将string转成unicode字符串 escape('

  8. vim编辑下几个退出保存的命令

    :w 将数据写入硬盘 :w! 若文件属性为“只读”时,强制写入该文件.不过需要注意,这个是在你的权限可以改变的情况下才能成立 :q 离开vim :q! 修改过文件,又不想保存 :wq 保存后离开 :w ...

  9. hdu-1452 Happy 2004---因子和+逆元

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1452 题目大意: 求2004^x次方的因子和mod29的值 解题思路: 首先2004 = 2 * 2 ...

  10. Uva 10765 鸽子和炸弹

    题目链接:https://vjudge.net/contest/166461#problem/B 题意: 给一个无向图,求每一个点删除后,剩下的连通块的数目: 分析: 只有割顶被删掉后,连通分量才会改 ...