ajax异步校验用户名

标签: ajax  异步  校验用户名  获取验证码

AJAX异步校验用户名

AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
在web开发中,经常会遇到需要发送局部请求,比如说验证用户名是否存在,获取手机验证码等,
单纯的验证用户名是否存在没有必要提交整个页面,这样有助于提升响应速度。


这里写图片描述


前端代码

    <script type="text/javascript">
        function getXhr() {
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            return xhr;
        }
        function checkNameUnique() {
            var xhr = getXhr();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4&&xhr.status == 200){
                    document.getElementById("username_btn").value =xhr.responseText;
                }
            };
            xhr.open("post","/checkNameUnique",true);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            document.getElementById("username_btn").value = "正在验证";
            var uname = document.getElementById("username_register").value;
            var username = (uname=='用户名')?'':uname;
            xhr.send("uname="+username);
        }
    <script>
     ......
    <h2>注册  </h2>
    <form action="/register" method="post">
        <div>
            <input class="username_register" name="username_register" id="username_register" value="用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '用户名';}">
            <input class="btn" type="button" id="username_btn" value="验证用户名" onclick="checkNameUnique()"/>
        </div>
        <input classs="tel" name="usrtel" value="手机号" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '手机号';}">
        <div>
            <input class="content3" name="code" value="验证码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '验证码';}"/>
            <button class="btn" onclick="false;" >获取验证码</button>
        </div>
        <input class="pwd_register" name="psw_register" value="密码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '密码';}">
        <input type="submit" class="register" value="注册">
    </form>

后端代码

@RequestMapping(path = {"/checkNameUnique"},method = {RequestMethod.POST})
    @ResponseBody
    private String checkNameUnique(@RequestParam("uname") String username){
        return userService.checkUsername(username);
    }

调试的时候出现的问题

在调试的时候曾把xhr.open和xhr.setRequestHeader这两个函数顺序写反了,效果一直就出不来。

版权声明:本文为onemoretime2016原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/onemoretime2016/article/details/78217614

智能推荐

机器学习中K-means聚类算法的原理及实现(Python)

背景知识 K-means聚类算法是一种流行于数据挖掘领域的无监督学习算法。K-means聚类算法的目的是:把已知的 n个点划分到k个聚类中,使得每个点都属于离它最近的点(聚类中心)对应的聚类。 在完成该算法的过程中,找到k个聚类中心是关键。 算法介绍 我们先介绍几个基本概念: 簇:数据点的集合,每一个簇中的对象是相似的。 质心:簇中所有点的中心(由计算所有点坐标的均值可得)。 比如在这幅图中,我们...

接口回调基础理解

接口回调听起来好像很厉害的样子,但其实只要能够搞清楚代码的执行过程,多看几遍,并且认真思考,再加上勤奋的练习,熟练掌握简单的接口回调并不是难题,接下来,我会用一个简单的例子,来带大家一起分析代码的执行过程,以及这样写的好处,以及这样写的思路。 我们知道recyclerView是没有自带点击事件的,所以这里我们就拿给recyclerView添加点击事件为例。 ok 我们做好了一个简单的recycer...

Mac下的myeclipse安装

1.首先要安装jdk跟jre 2.安装过程中可能会遇到您需要安装旧 Java SE 6 运行环境才能打开此 Java 应用程序的提示     解决办法就是安装ava for os x 2015-001.,这里不要点系统给你提示的界面,根本没法下载 我上传的链接,可以直接下载:链接: https://pan.baidu.com/s/1qYbT6os 密码: x...

30分钟实战树莓派连接到微软云Azure IoT Hub并将数据可视化

更多内容,关注公众号: 树莓派是很多动手达人必备的小玩具,本节内容,让我们拿出树莓派,在30分钟内,将树莓派连接到微软云Azure的IoT Hub,然后将温湿度曲线可视化。 本实战完整视频: 树莓派连接到Azure IoT Hub 并用时序见解展示数据 本节内容中,树莓派发送的数据是模拟出来的,并没有真实的连接到传感器,您可以选购不同的传感器来采集真实的环境信息。 Azure IoT Hub 为我...

spring cloud gateway 整合ribbon、nacos discovery实现负载均衡源码简析

1 spring cloud gateway 负载均衡入口 spring cloud gateway 使用 LoadBalancerClientFilter 来实现载均衡的功能,该过滤器通过LoadBalancerClient.choose(ServerWebExchange exchange)方法来获取目标实例。 LoadBalancerClient 为spring-cloud-commons包...

猜你喜欢

VUE快速搭建项目

作为一个前端小辣鸡 今天在网上找到了 一个 快速 无脑式搭建vue项目的方式 分享一下 我们采用图形界面创建项目。通过 vue ui 命令启动 vue cli service 后,访问 http://localhost:8000/project/create 可以直接进入项目创建流程。 步骤中有些地方值得一提 详情:包管理器指定 npm,后续在npm 配置文件(.npmrc)中可手动指定国内镜像源...

2017-8-10 Struts2学习笔记二

一、web.xml文件的编写 1. 由于struts2是用过滤器拦截请求的,所以需要在web.xml文件中配置一个过滤器。 2. 这个过滤器的名字叫StrutsPrepareAndExecuteFilter,中文名曰struts准备和执行过滤器,就是这个过滤器拦截我们在地址栏的请求。 3. 查找这个过滤器,将它的全路径写在filter-class标签中,eclipse可以使用Shift+Ctrl+...

Windows Terminal配置Git

文章目录 Windows Terminal配置Git 效果 下载和安装 配置Windows Terminal 配置其它命令行 Windows Terminal配置Git 效果 先上效果图: 下载和安装 Windows Terminal是微软开发的面向命令行用户的全新,现代,功能丰富,高效的终端应用程序。 它包括Windows命令行社区最常请求的许多功能,包括对选项卡,富文本,全球化,可配置性,主题...

CW MCU v11.1学习笔记1

说明:通过处理器专家创建芯片为MC9S08DZ60的工程,按键控制LED 一、CW11.1软件界面布局 1、双击桌面图标,打开软件,设置工作空间 软件主界面 调试界面 处理器专家界面 有时经常调整(删除)面板布局,如果想恢复布局,可在Window工具栏下的Reset Perspective选项来复位面板布局 二、新建工程 1、在C/C++模式下,在Commander面板下点击New MCU pro...

栈-综合应用-中缀表达式转后缀表达式

综合应用 使用栈完成一个计算表达式的结果 输入:2 * 3 - 4 / 5 * 0.2 => 0.08 思路 使用index -> 2 (第一个为止),数字放入数栈,符号放入符号栈,符号栈为空,直接放入。 遇到第二个运算符,与符号栈中的符号进行运算符优先级比较。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvhtZGbo-1601271684334)...