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. 传输资料在100MB以上的 传输介质选择

    传输资料在100MB以上的 硬盘-->千兆局域网-->硬盘 硬盘-->USB3.0-->硬盘 硬盘-->数据线-->硬盘 传输速率 USB 的理论传输值 USB2. ...

  2. js35

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. PHP和JSON

    PHP和JSON 一.总结 1.php中json的使用方法:php中json的使用超级简单啦,主要是两个函数json_encode(编码)和json_decode(解码),像md5加密 2.json的 ...

  4. 在VS中设置比较和谐的字体和颜色的方法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 先在studiostyl.es网站选择你喜欢的字体方案,我个人比较喜欢这款: Humane Studio,注意在网页上 ...

  5. 基于面向对象js的弹窗的组件的开发案例

    var aInput = document.getElementsByTagName("input"); 2 aInput[0].onclick = function() { 3 ...

  6. natapp解决Invalid Host header的问题

    最近在做一个微信公众号项目,用微信开发工具调试本地项目,需要做一下内网穿透,代理都配置好了,页面出现这个Invalid Host header错误,内网穿透工具我是用的frps做的,最后通过googl ...

  7. 微信支付v2开发(10) 全网发布

    关键字:微信公众平台 微信支付 全网发布 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/wxpay-publish.html 在这篇微信公众平台开发教程中, ...

  8. 5. Node基础编程

      基于Chrome V8引擎 单线程 使用JavaScript开发后端代码 非阻塞的IO common规范 common一定是通过module.exports={}输出 创建Http Server ...

  9. VC中画矩形框 & polyline画多点

    搞自动化会经常遇到一个问题就是记录实时的曲线,通常做法是首先将数据保存在一个记事本中,或数据库.使用VB或DELPHI可以直接调用现成的控件画图,只是控制起来不方便.所以使用VC就需要程序来控制.在网 ...

  10. 学习笔记：Vue——混入

    前言: 到现在用Vue做了不少项目了,用到的都是初阶的功能,很多高阶能力都没有用到.仅用初级阶段也能做项目,甚至是复杂项目,可见vue之强大,果然是渐进式开发方式. 但是本着虚心学习的态度,还是要抽空 ...