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. python 序列化，常用模块

    生成器与迭代器 生成器 在 Python 中,使用了 yield 的函数被称为生成器(generator). 跟普通函数不同的是,生成器是一个返回迭代器的函数,只能用于迭代操作,更简单点理解生成器就是 ...

  2. Mysql 服务无法启动解决办法

    1.我使用的是MySQL-5.7.10-winx64 版本,在安装后启动服务时出现 “服务无法启动”错误 2.解决办法为删除安装目录中的data文件,然后打开cmd调到自己的安装目录下输入mysqld ...

  3. ExecutorService的invokeAny方法

    一.此方法获得最先完成任务的结果,即Callable<T>接口中的call的返回值,在获得结果时,会中断其他正在执行的任务 示例代码: import java.util.ArrayList ...

  4. svn图标显示不正常，文件夹显示但文件不显示svn图标

    svn图标显示不正常,文件夹显示但文件不显示svn图标   这个问题的引发是自己造成的,使用myEclipse时progress会卡在 refresh svn status cache (0%)这里, ...

  5. Matlab函数——awgn（高斯噪声）

    Matlab函数--awgn awgn 将白色高斯噪声添加到信号中 语法  y = awgn(x,snr)  y = awgn(x,snr,sigpower)  y = awgn(x,snr,'mea ...

  6. mvc页面间的传值

    本文大致讲解mvc前后端的传值方式,包括control向view.view向control.以及action向action. 回顾 我们回顾下在ASP.NET WebForms中,页面之间最常用的传值 ...

  7. linux中启动网卡报错:Bringing up interface eth1: Error: Connection activation failed

    在重启linux网络服务的时候提示: Active connection path: /org/freedesktop/NetworkManager/ActiveConnection/2 并且产生报错 ...

  8. 在Docker容器中安装jdk和spark

    在Docker容器中安装jdk和spark 1.下载jdk和spark 可以使用迅雷等专业下载软件下载jdk和spark软件包,注意是linux版,这里直接给出下载地址: JDK下载地址 JDK进入后 ...

  9. 【java开发系列】—— java输入输出流

    前言 任何语言输入输出流都是很重要的部分,比如从一个文件读入内容,进行分析,或者输出到另一个文件等等,都需要文件流的操作.这里简单介绍下reader,wirter,inputstream,output ...

  10. 使用pm2自动化部署node项目

    1.pm2简介 pm2(process manager)是一个进程管理工具,维护一个进程列表,可以用它来管理你的node进程,负责所有正在运行的进程,并查看node进程的状态,也支持性能监控,负载均衡 ...