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. 嵌入式开发 MCU

    From: http://www.infoq.com/cn/articles/intelligent-embedded-os-Internet-of-things-and-robots 嵌入式开发是一 ...

  2. Android ViewPager+TabHost实现首页导航

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就 ...

  3. 模拟ArrayList

    package com.helloidea; import java.util.ArrayList; import java.util.Collection; import java.util.Lis ...

  4. Flask入门邮件同步与异步发送(九)

    ​ 应用场景: 用户在注册或者密码丢失等过程中,账号绑定邮箱,用户在进行身份认证的过程中,电子邮箱确实是一种很常用的方式,Python中提供了smtplib可以实现发送电子邮件功能,Flask框架也有 ...

  5. mongodb文档替换

    对下面的文档做一个比较大的调整,将 friends.enemies两个字段移到 relationships子文档中. > db.people.insert({ "name" ...

  6. Python 将文件重新命名

    # -*- coding: utf-8 -*- __author__ = 'louis' import os import re def rename_files(dir_path): i=1 pri ...

  7. 第1章：初始C#及其开发环境

    第1章:初始C#及其开发环境 Table of Contents 能做什么? 熟悉VS开发环境 Hello World 能做什么? 能生成ASP.NET Web 应用程序.XML Web Servic ...

  8. （第六场）Heritage of skywalkert 【玄学】

    题目链接:https://www.nowcoder.com/acm/contest/144/J 标题:J.Heritage of skywalkert | 时间限制:1 秒 | 内存限制:256M s ...

  9. （第五场）J plan 【贪心】

    题目链接:https://www.nowcoder.com/acm/contest/143/J 题目描述 There are n students going to travel. And hotel ...

  10. 2018.11.9 Dubbo入门学习

    1.什么是Dubbo dubbo.io 代表是开源的 DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服 ...