ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）

一、总结

1、ajax可以实现我们常见的注册用户名动态判断

2、jquery里面的ajax也是类似我们这样封装了的函数

二、ajax实现注册用户名时动态显示用户名是否已经被注册

练习：判断用户名是否存在

  • 实例描述：

    判断用户名是否存在，并进行相应的提示。

  • 案例要点：

    JSON数据的加载和解析；
    将用户的注册名和加载的JSON文件进行比较，判断用户名是否已经存在。

三、代码

html代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

   <meta charset="utf-8">

   <title>课堂演示</title>

   <script type="text/javascript" src="ajax1.js"></script>

   <style type="text/css">

   #sp{

       color: orange;

     }

   </style>

 </head>

 <body>

   <form action="#" id="form1" method="get">

     <p>用户名：<input type="text" id="username" name="username"><span id="sp"></span></p>

     <p>密&nbsp&nbsp码：<input type="password" id="password" name="password"></p>

     <input type="button" value="提交" onclick="checkName()">

   </form>

   <script>

       function checkName(){

         var username=document.getElementById('username').value;

         var sp=document.getElementById('sp')

         var boo=false;

         ajax('names.json',function(str){

           // alert(typeof str)

           var nameArr=JSON.parse(str)

           // alert(typeof nameArr)

           for(var i=0;i<nameArr.length;i++){

             if (nameArr[i]==username) {

               // alert('用户名已经存在')

              boo=true;

             }//else{

               //alert('用户名可以使用')

             //}

           }

           if (boo) {

             sp.innerHTML='您来晚了，这个用户名已经存在,请再换一个'

             // alert('用户名已经存在')

           }else{

             // alert('用户名可以使用')

             sp.innerHTML='恭喜您，这个用户名可以使用'

           }

         })

       }

   </script>

 </body>

 </html>

js的ajax函数封装：ajax1.js

 function ajax(url,funSucc,fnFaild){

     var xhr=new XMLHttpRequest();

     url=url+'?'+new Date().getTime();

     xhr.open('GET',url,true);

     xhr.send();

     xhr.onreadystatechange=function(){

         if (xhr.readyState==4) {

             if (xhr.status==200) {

                 funSucc(xhr.responseText)

             }else{

                 if (fnFaild){

                      fnFaild(xhr.statusText)

                 }

             }

         }

     }

 }

数据：names.json

["张三","李四","王五"]

ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）的更多相关文章

  1. m_Orchestrate learning system---二十四、thinkphp里面的ajax如何使用

    m_Orchestrate learning system---二十四.thinkphp里面的ajax如何使用 一.总结 一句话总结:其实ajax非常简单:前台要做的事情就是发送ajax请求过来,后台 ...

  2. drupal里面的ajax最粗浅的理解-流程

    1,  form里面的ajax所在地表单元素有一个事件,激发system/ajax,相应的有ajax_form_callback(), 会把被改变的元素值传到form_state[values]中, ...

  3. 从jquery里的$.ajax()到angularjs的$http

    jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节. 在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下 ...

  4. jquery里的Ajax解析

    现在对Jquery的Ajax进行详细的解析. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百 ...

  5. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  6. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  7. 基于jQuery实现的Ajax 验证用户名唯一性

    基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...

  8. 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层（页面代码将登录的用户名和密码存在cookie）,中间页面中存在一个超链接，单击超链接可以链接到第三个页面查看信息。若选择“

    Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...

  9. ajax请求为异步操作时，返回的数据不会被并列函数执行

    ajax请求为异步操作时,返回的数据不会被并列函数执行

随机推荐

  1. 19.Node.js EventEmitter

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里 ...

  2. 洛谷P1316 丢瓶盖

    题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...

  3. carousel轮播器

    <div id="myCarousel" class="carousel slide" data-ride="carousel" st ...

  4. UVA 11488 Hyper Prefix Sets (字典树）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  5. BZOJ2527: [Poi2011]Meteors(整体二分)

    Description Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby gala ...

  6. CList 点击表头排序 （2）两种排序方法中其中一种

    上一篇讲解SortItem()方法如何使用,虽然都是抄别人的但是就是想让大家有个大概的了解 CList 点击表头排序 (1)SortItems函数 点击表头排序基本思路都是 1.首先响应HDN_ITE ...

  7. 如何在同一台机器上安装多个MySQL的实例（转）

    最近由于工作的需要,需要在同一台机器上搭建两个MySQL的实例,(注:已经存在了一个3306的MySQL的实例). 先说下,什么是mysql的多实例,简单的来说就是一台机器上安装了多个mysql的服务 ...

  8. 利用 istio 来对运行在 Kubernetes 上的微服务进行管理

    尝试在一个准生产环境下,利用 istio 来对运行在 Kubernetes 上的微服务进行管理. 这一篇是第一篇,将一些主要的坑和环境准备工作. 内容较多,因此无法写成手把手教程,希望读者有一定 Ku ...

  9. 1.1 Introduction中 Consumers官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Consumers 消费者(Consumers) Consumers label t ...

  10. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第六篇：拦截器

    摘要      本文将对“MVC公告发布系统”的发布公告功能添加日志功能和异常处理功能,借此来讨论ASP.NET MVC中拦截器的使用方法. 一个小难题      我们继续完善“MVC公告发布系统”, ...