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. ConcurrentHashMap实现原理--转载

    原文地址:http://ajax-xu.iteye.com/blog/1104649 ConcurrentHashMap是Java 5中支持高并发.高吞吐量的线程安全HashMap实现.在这之前我对C ...

  2. 利用日志使管理Linux更轻松

    利用日志使管理Linux更轻松 操作系统的日志主要具有审计与监测的功能,通过对日志信息的分析,可以检查错误发生的原因,监测追踪入侵者及受到攻击时留下的痕迹,甚至还能实时的进行系统状态的监控.有效利用日 ...

  3. Java学习笔记八

    IO流:就是input/output输入/输出流. 一.字节流操作文件的便捷类:FileWriter和FileReader import java.io.FileWriter; import java ...

  4. weblogic12

    http://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 建立ejb http://docs.oracle. ...

  5. 字符设备驱动-------Linux异常处理体系结构

    裸机中断流程 外部触发 CPU 发生中断, 强制的跳到异常向量处 跳转到具体函数 保存被中断处的现场(各种寄存器的值) 执行中断处理函数,处理具体任务 恢复被中断的现场 Linux处理异常流程 异常发 ...

  6. 解决eclipse端口被占用的问题

    问题如图所示,在eclipse中开启tomcat服务器时报错:端口已被占用. 这是因为在tomcat开启的状态下,eclipse异常关闭,导致tomcat一直占用端口. 解决办法如下: 1: 输入命令 ...

  7. 不重新启动VMWare虚拟机加入虚拟磁盘的方法（上）

    近期因为业务须要在不重新启动系统的前提下对系统进行扩容,前提是该系统做过lvm.可是没有足够的物理卷(硬盘),所以引出了改文.本文共分为上下两部分.这是第一部分. 文件夹 加入磁盘 做LVM 加入硬盘 ...

  8. 83.#pragma详解

    创建数据段 //创建数据段 #pragma data_seg("fangfangdata") ; #pragma data_seg() 与数据段连接,实现数据通信,分享 //实现数 ...

  9. web service 原理

    Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...

  10. 1.10 Python基础知识 - 序列：列表

    在Python中有很多的组合数据类型,其中包括列表,元组,字符串等数据类型,这些数据类型统称为序列类型,用他们可以处理复杂的数据. 列表,是一组有序元素组合的数据结构.列表是可变的数据类型. 列表采用 ...