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. 1.lombok系列1：初识lombok

    转自:https://www.imooc.com/article/18156 初识lombok 官网:https://projectlombok.org/ 什么是lombok 连官网都懒得废话,只给出 ...

  2. Windows(x86,64bit)升级MySQL 5.7.17免安装版的详细教程

    MySQL需要升级到5.5.3以上版本才支持Laravel 5.4默认的utf8mb64字符编码.因此就把MySQL升级了一下,期间还是遇到些小问题,记录一下以供参考. 升级准备 备份之前MySql目 ...

  3. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  4. javascript之Ajax起步

    XMLHttpRequest  readyState属性的值: UNSENT--0--已创建XMLHttpRequest对象. OPENED--1--已调用open方法: HEADERS_RECEIV ...

  5. 网页设计实战3 ufo类型的科技网页如何实现

    网页设计实战3 ufo类型的科技网页如何实现 一.总结 一句话总结:基础的图片素材就是如何几张图片,这个效果只是通过jquery或者js让那个png图片旋转起来了,如此而已.其实核心就是一个trans ...

  6. 7,NULL与nullptr对比

    #include <iostream> #include <array> using namespace std; void show(int num) { cout < ...

  7. TCP超时重传机制

    TCP协议在能够发送数据之前就建立起了"连接".要实现这个连接,启动TCP连接的那一方首先将发送一个SYN数据包.这只是一个不包含数据的数据包, 然后,打开SYN标记.如果另一方同 ...

  8. jQuery的实现原理和核心

    1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...

  9. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  10. JS错误记录 - getStyle代替offset、任意值运动框

    本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器.  不是在新定时器开启之后再清除 ...