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. 概述File i/o

    1.File对象既可表示文件,也可表示目录(文件夹). 2. 创建一个File对象 File file = new File (String pathName[文件路径名]); 3.在Windows操 ...

  2. pdf转为html查看pdf.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 使用HTML5 canvas做地图（2）瓦片以及如何计算的

    上一篇也说到瓦片,我们为什么使用瓦片?这一篇主要是关于如何拼接地图? 下面的一张图,可以一眼明了,地图是如何切割以及拼接的. 瓦片信息 瓦片信息包括切图原点,瓦片大小,格式,分辨率以及分辨率级别等. ...

  4. 使用CKRule实现PVC配方计算

    1,PVC计算的基本原理 配方员设计好配方,再进行抽象提炼,会出现相对于软件而言可以理解的逻辑,如属性的概念,对厂企生成的PVC产品而言,一般都有产品大类名称,花纹,颜色,长度,宽度,厚度等概念,这对 ...

  5. io饥饿

    看书,在书上看到一句话,防止io饥饿,google了一下,也没有找到相关的解释,究竟什么是io饥饿.

  6. broadcastemit

    http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope#$broadcast scope可以以类似于DOM事件的方式进行事件传播.事件 ...

  7. sql server性能分析--执行sql次数和逻辑次数

    目前在做一个项目优化时,想通过数据库层分析sql server系统性能,查了一下网上代码,修改了一下标题和DMVs代码,以下代码可以用来分析系统运行一段时间后,那些语句是系统忙的sql语句.做为参考. ...

  8. OpenGL总结

    最近2D转向3D,也从固定管线转到了可编程管线,有些细节的东西记录一下. Geometry Shader Geometry Shader从Vertex Shader中获取数据,向Fragment Sh ...

  9. Netbackup用于技术支持的问题报告（报障模版）

    在与支持部门联系以报告问题之前,请填写以下信息. 日期: _________________________记录以下产品.平台和设备信息:■ 产品及其版本级别.■ 服务器硬件类型和操作系统级别.■ 客 ...

  10. javascript dom 操作详解 js加强

    js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...