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. WdatePicker日期控件的使用

    将压缩包中的文件连带文件夹添加到项目中去,注意要完整的添加到项目中去,不要更改了其目录结构 然后在aspx页面中直接使用即可: 首先引入: <script src="/Controls ...

  2. AngularJsDEMO

    接触AngularJs时间不长,纯粹是学着好玩而已,因此没有深挖原理,针对理论性的知识,园子里面有很多介绍,我就不多介绍了. 这里写了个简单的DEMO,部署起来就可以直接运行了,里面 大概用了最基础的 ...

  3. 逐步配置企业版Symantec Norton防病毒服务器

    逐步配置企业版Symantec Norton防病毒服务器 配置企业版Symantec Norton NT操作系统,已经安装IIS 安装Symantec Norton 10 安装系统中心 650) th ...

  4. ByteUtils

    package sort.bing.com; import java.io.ByteArrayOutputStream;import java.io.DataOutputStream;import j ...

  5. js--递归详解

    1 函数的调用 eg1:阶乘算法 var f = function (x) { if (x === 1) { return 1; } else { return x * f(x - 1); } }; ...

  6. interpolator-动画执行方式

    动画中有一个属性是设置动画执行的方式, <?xml version="1.0" encoding="utf-8"?> <set xmlns:a ...

  7. js原生代码实现鼠标拖拽(超简单)

    首先先来看这一张图 在这种图中,盒子的大小为512px,并且margin-left:-250px margin-top:140px;并通过一些样式让其在中部显示 这些样式都不是重要的,这里加个marg ...

  8. c#中反射的用法（即如何根据字符找到已定义的变量）

    2013-07-20 08:06 720人阅读 评论(0) 收藏 举报  分类: C#(9)  作者同类文章 X 版权声明:本文为博主原创文章,未经博主允许不得转载. 常常羡慕javascript中, ...

  9. 图灵机器人API，适用于微信、微博、QQ群、智能硬件等

    该API有智能聊天.查天气.查快递.查菜谱.查车票.查航班.查出行.查周边等近500个功能,能够用在微信公众平台.QQ群.手机语音助手.智能硬件等领域\ [1].[代码] [PHP]代码 跳至 [1] ...

  10. oracle_经常使用分组函数

     oracle_经常使用分组函数 ①分组函数 1.max(column):求最大值,对数据类型没有要求,随意数据类型都能够 2.min(column):求最小值,对数据类型没有要求,随意数据类型都 ...